微信小程序之如何自定义底部tabbar导航

在app.json里放入tabbar
注释：这里的tabbar不会展示，但是一定要写上

{
  "pages": [
    "pages/index/index",
    "pages/my/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }, 
  "tabBar": {
    "custom": true,  
    "color": "#7A7E83",
    "selectedColor": "#333333",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "assets/img/1.png",
        "selectedIconPath": "assets/img/1s.png",
        "text": "保单万事通"
      },{
        "pagePath": "pages/my/index",
        "iconPath": "assets/img/2.png",
        "selectedIconPath": "assets/img/2s.png",
        "text": "保单万事通"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

注意我加了一个属性 "custom": true，这个如果不加，就只能使用微信自带的tabbar底部导航了，无法按照自己的想法设计，所以，当你加了custom这个属性后，你只需要，

在根目录下，添加一个组件 cumtom-tab-bar,你甚至都不需要去引进，小程序会自己去找这个组件，切记，放到根目录下（注释： cumtom-tab-bar与pages同级，同时 cumtom-tab-bar里面的文件要以index命名，不然会报错）

，然后，你就可以随心所欲控制底部tabbar了

如图

cumtom-tab-bar组件

js：

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#333333",
    canCustom: true,
    list: [
      {
        "pagePath": "/pages/index/index",
        "iconPath": "/assets/img/1.png",
        "selectedIconPath": "/assets/img/1s.png",
        "text": "首页"
      },{
        "pagePath": "/pages/my/index",
        "iconPath": "/assets/img/2.png",
        "selectedIconPath": "/assets/img/2s.png",
        "text": "我的"
      }
    ]
  },
  created(){
   
  },
  lifetimes: {
    attached: function () {
      
      
      // getApp().watch(this.watchBack,this)
     
    },
  },
  attached: function () {
    // getApp().watch(this.watchBack, this)

  },


  methods: {

    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path;
      console.log(url);
      var pages = getCurrentPages() //获取加载的页面

      // var currentPage = pages[pages.length - 1] //获取当前页面的对象

      // var urls = currentPage.route //当前页面url

     // var options = currentPage.options //如果要获取url中所带的参数可以查看options
     // console.log("route = ", urls);
      console.log(url)
      if (url == "/pages/add/add"){
        getApp().globalData.switctTime++;
        if (getApp().globalData.switctTime>1){
          getApp().globalData.switctTime = 0;
      
          wx.switchTab({
            url: getApp().globalData.userUrl
          })
          return false;
        }else{
          wx.switchTab({
            url:"/pages/add/add"
          })
          return false;
        }
        
        // if (urls == "pages/add/add"){
        //   getApp().globalData.userUrl = 1
        // }
      }else{
        getApp().globalData.switctTime = 0;
        getApp().globalData.userUrl = url;
      }
      // if(url==undefined){
      //   this.setData({
      //     selected: data.index
      //   })    
      //   return;
      // }
      wx.switchTab({
        url:url
      })
      this.setData({
        selected: data.index
      })
    }
  }
})
wxml：

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view id='customTabBar' class="tab-bar" wx:if="{{canCustom}}">

  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>

  </cover-view>



</cover-view>
wxss：

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10000;
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}