Tabbar：底部导航栏

定义footbar子组件

需要注意的是：useRouter()用来记录当前的路由名称，以便van-tabbar组件显示对应的高亮状态

<template><div class="navFooter"><van-tabbar v-model="active" active-color="#26A69A" inactive-color="#505660"><van-tabbar-item replace :to="item.to" :name="item.name" v-for="(item,index) in navList" :key="index"><span>{{item.text}}</span><template #icon="props"><img :src="props.active ? item.active : item.inactive" /></template></van-tabbar-item></van-tabbar></div>
</template>
<script>import { ref } from 'vue';import { useRouter } from 'vue-router'export default {setup() {const router = useRouter();const active = ref(router.currentRoute.value.name);const navList = [{to: '/',name: 'home',text: '首页',active: require('@img/tabbar1-1.png'),inactive: require('@img/tabbar1.png'),},{to: '/list',name: 'list',text: '列表',active: require('@img/tabbar2-2.png'),inactive: require('@img/tabbar2.png'),},{to: '/cart',name: 'cart',text: '购物车',active: require('@img/tabbar3-3.png'),inactive: require('@img/tabbar3.png'),},{to: '/mine',name: 'mine',text: '我的',active: require('@img/tabbar4-4.png'),inactive: require('@img/tabbar4.png'),}]return {active,navList};},}
</script>
<style lang='less' scoped>.navFooter {height: 98px;position: fixed;bottom: 0;left: 0;right: 0;width: 100%;}
</style>

app.vue中引入组件

$route.meta.navFooterShow获取router.js中需要显示底部tabbar的配置

<template><div id="app"><router-view></router-view><NavFooter v-if="$route.meta.navFooterShow"></NavFooter></div>
</template><script>import NavFooter from './components/NavFooter.vue'export default {components: {NavFooter},}
</script><style lang="less">/* 一些公共样式 */
</style>

router.js

// navFooterShow：true 显示底部导航栏
const routes = [{path: '/',name: 'home',component: () => import('../views/home/home.vue'),meta: {navFooterShow: true,}},{path: '/list',name: 'list',component: () => import('../views/list/list.vue'),meta: {navFooterShow: true,}},{path: '/cart',name: 'cart',component: () => import('../views/cart/cart.vue'),meta: {navFooterShow: true,}},{path: '/mine',name: 'mine',component: () => import('../views/mine/mine.vue'),meta: {navFooterShow: true,}}
]

Tabbar：底部导航栏相关推荐

flutter TabBar 底部导航栏
更多文章请查看 lutter从入门到精通实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNaviga ...
uView（Tabbar 底部导航栏）
(一)第一种方式 1,每个菜单页面都要 "首页" "发布" "我的" 每个页面都要 <template><view> ...
Vue - tabbar(底部导航栏)
文章目录一.TabBar实现思路二.assets文件夹 2.1 在App.vue里面动态引用css文件三.基本搭建四.TabBar和TabBarItem组件封装 4.1 TabBar组件封装 ...
小程序底部导航栏(tabBar)图标的正确做法
许多人都认为小程序系统的底部导航栏特别不好看,为了美观而选择自定义,从此身陷漩涡无法自拔.其实真正的原因是图标的图片处理不当(说白了就是前端和设计太菜了),导致会有线条变粗,间距不当的视觉感受. 除小 ...
2_flutter_TextField(文本框),TabBar(选项卡),bottomNavigationBar(底部导航栏)
1_TextField(文本框) import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: MyEdit ...
微信小程序实现底部导航栏tabbar
参考链接: (1)微信小程序底部导航Tabbar https://www.cnblogs.com/huangjialin/p/6278429.html (2)小程序自定义tabbar实现中间图标突出效 ...
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )
文章目录一.Scaffold 组件二.底部导航栏整体架构三.BottomNavigationBar 底部导航栏四.BottomNavigationBarItem 导航栏条目五.PageVie ...
ionic3 动态设置tabs页面底部导航栏隐藏，并显示输入框添加评论
1.先上原始效果图: 2.完成后效果 2.实现思路: ion ...
微信小程序从零开始开发步骤（三）底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...

Tabbar：底部导航栏

Tabbar：底部导航栏相关推荐

最新文章

热门文章