mpvue 小程序如何自定义tabBar，不使用navigateTo跳转，模拟redirectTo跳转

原生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博客，很多内容可以看，喜欢的给星星哦 https://github.com/liangfengbo/frontend