原生tabBar

tabBar: {  "list": [    {      pagePath: "pages/index/main",      iconPath: "/static/images/index-default.png",      selectedIconPath: "/static/images/index-active.png",      text: "首页"    },    {      pagePath: "pages/orderList/main",      iconPath: "/static/images/order-default.png",      selectedIconPath: "/static/images/order-active.png",      text: "订单"    },    {      pagePath: "pages/notice/main",      iconPath: "/static/images/icon-notice-default.png",      selectedIconPath: "/static/images/icon-notice-active.png",      text: "预告"    },    {      pagePath: "pages/user/main",      iconPath: "/static/images/person-default.png",      selectedIconPath: "/static/images/person-active.png",      text: "个人"    }  ],}

自定义tabBar

效果图1：如果需要添加按钮

效果2 如果不需要按钮

在组件文件新建一个vueTabBar.vue

js处理

css

特别说明：你copy下拉，icon图片你确定路径对，建议 81 * 81，微信小程序推荐的，

第二： 你引入组件就可以使用

import vueTabBar from '../../components/vueTabBar'components: {  vueTabBar},
    

selectNavIndex: 是需要高亮的下标needButton： 是否显示添加的按钮（看效果图，就是有颜色的按钮）handButton：控制有颜色的按钮方法btnText： 按钮文字

第三个: 因为tabBar使用跳转的方法是

wx.switchTab({  url,})

我在全部的main.js windo一样是配置tabBar的

tabBar: {  "list": [    {      pagePath: "pages/index/main",      iconPath: "/static/images/index-default.png",      selectedIconPath: "/static/images/index-active.png",      text: "首页"    },    {      pagePath: "pages/orderList/main",      iconPath: "/static/images/order-default.png",      selectedIconPath: "/static/images/order-active.png",      text: "订单"    },    {      pagePath: "pages/notice/main",      iconPath: "/static/images/icon-notice-default.png",      selectedIconPath: "/static/images/icon-notice-active.png",      text: "预告"    },    {      pagePath: "pages/user/main",      iconPath: "/static/images/person-default.png",      selectedIconPath: "/static/images/person-active.png",      text: "个人"    }  ],}

一定要记住在onSow的方法要隐藏掉原生的tabBar,

wx.hideTabBar()

这样可以达到原生的99%，至少不用navigateTo，有返回键，体验度很差，喜欢的去我的GitHub，thanks!

我的GitHub博客，很多内容可以看，喜欢的给星星哦