我之前寫一個微信小程序，保單萬事通，有一個這樣的功能

image.png

這個底部導(dǎo)航，如果用小程序自帶的tabbar，根本無法實現(xiàn)，所有我想第2種方法來實現(xiàn)
微信小程序文檔中，有一種這個方法，但是我不建議，體驗極差。。。。使用首先可以通過在app.json里放入

{
  "usingComponents": {
    "mp-tabbar": "../../components/tabbar/tabbar"
  }
}

然后組件引入

<mp-tabbar style="position:fixed;bottom:0;width:100%;left:0;right:0;" list="{{list}}" bindchange="tabChange"></mp-tabbar>

// page.js示例代碼

Page({
    data: {
        list: [{
            text: "對話",
            iconPath: "/example/images/tabbar_icon_chat_default.png",
            selectedIconPath: "/example/images/tabbar_icon_chat_active.png",
        },
        {
            text: "設(shè)置",
            iconPath: "/example/images/tabbar_icon_setting_default.png",
            selectedIconPath: "/example/images/tabbar_icon_setting_active.png",
            badge: 'New'
        }]
    },
    tabChange(e) {
        console.log('tab change', e)
    }
});

但是這樣寫有個問題，就是換頁面的時候，會導(dǎo)致整個頁面重新刷新，用戶體驗不好
所以我建議，通過在app.json里放入tabbar

js
 "tabBar": {
    "custom": true,//組件替換屬性
    "color": "#7A7E83",
    "selectedColor": "#333333",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/guarantee/guarantee",
        "iconPath": "assets/img/1.png",
        "selectedIconPath": "assets/img/2.png",
        "text": "保單萬事通"
      },
      {
        "pagePath": "pages/add/add",
        "iconPath": "assets/img/add.png",
        "text": "添加保單"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "assets/img/6.png",
        "selectedIconPath": "assets/img/7.png",
        "text": "我的"
      }
    ]
  },

注意我加了一個屬性 "custom": true，這個如果不加，就只能使用微信自帶的tabbar底部導(dǎo)航了，無法按照自己的想法設(shè)計，所以，當(dāng)你加了custom這個屬性后，你只需要，在根目錄下，添加一個組件 cumtom-tab-bar,你甚至都不需要去引進，小程序會自己去找這個組件，切記，放到根目錄下，然后，你就可以隨心所欲控制底部tabbar了

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#333333",
    canCustom: true,
    list: [
      {
        "pagePath": "/pages/guarantee/guarantee",
        "iconPath": "/assets/img/1.png",
        "selectedIconPath": "/assets/img/2.png",
        "text": "保單"
      },
      {
        "pagePath": "/pages/add/add", 
        "iconPath": "/assets/img/4.png",
        "selectedIconPath": "/assets/img/add.png",
        "text": "添加保單"
      },
      {
        "pagePath": "/pages/my/my",
        "iconPath": "/assets/img/6.png",
        "selectedIconPath": "/assets/img/7.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] //獲取當(dāng)前頁面的對象

      // var urls = currentPage.route //當(dāng)前頁面url

     // var options = currentPage.options //如果要獲取url中所帶的參數(shù)可以查看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;
}