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

我之前写一个微信小程序，保单万事通，有一个这样的功能

 

image.png

这个底部导航，如果用小程序自带的tabbar，根本无法实现，所有我想第2种方法来实现
微信小程序文档中，有一种这个方法，但是我不建议，体验极差。。。。使用首先可以通过在app.json里放入

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

然后组件引入

<mp-tabbar style="position:fixed;bottom:0;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: "设置",
            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)
    }
});

但是这样写有个问题，就是换页面的时候，会导致整个页面重新刷新，用户体验不好
所以我建议，通过在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底部导航了，无法按照自己的想法设计，所以，当你加了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] //获取当前页面的对象

      // 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;
}

作者：吃盖浇饭
链接：https://www.jianshu.com/p/f4eae3317194
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。