微信小程序開發之自定義菜單tabbar

作這個 遇到問題比較多，特此記錄以便查看，直接上代碼：

1、app.js

控制原有菜單隱藏、啓用新菜單、菜單列表，集中在這裏控制

hideTabBar這個很關鍵，解決蘋果6S致使的雙導航欄：原文https://blog.csdn.net/czp555/article/details/87258301

hideTabBar: function () {
    wx.hideTabBar({
      fail: function () {
        setTimeout(function () {
          wx.hideTabBar()
        }, 500)
      }
    });
  },
  editTabbar: function() {
    let tabbar = this.globalData.tabBar;
    let currentPages = getCurrentPages();
    let _this = currentPages[currentPages.length - 1];
    let pagePath = _this.route;
    (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
    for (let i in tabbar.list) {
      tabbar.list[i].selected = false;
      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
    }
    _this.setData({
      tabbar: tabbar
    });
  },
  globalData: { 
    tabBar: {
      "color": "#f3f3f3",
      "selectedColor": "#f3f3f3",
      "borderStyle": "white",
      "backgroundColor": "#ff731d",
      "list": [{
          "pagePath": "/youfan_market/pages/index/index",
          "text": "首頁",
          "iconPath": "/youfan_market/resource/images/tabBar/home.png",
          "selectedIconPath": "/youfan_market/resource/images/tabBar/home.png"
        },
        {
          "pagePath": "/youfan_market/pages/category/category",
          "text": "分類",
          "iconPath": "/youfan_market/resource/images/tabBar/category.png",
          "selectedIconPath": "/youfan_market/resource/images/tabBar/category.png"
        },
        {
          "pagePath": "/youfan_market/pages/user/index",
          "text": "分享轉發",
          "iconPath": "/youfan_market/resource/images/tabBar/share.png",
          "selectedIconPath": "/youfan_market/resource/images/tabBar/share.png",
          isShare: true
        },
        {
          "pagePath": "/youfan_market/pages/cart/cart",
          "text": "購物車",
          "iconPath": "/youfan_market/resource/images/tabBar/cart.png",
          "selectedIconPath": "/youfan_market/resource/images/tabBar/cart.png"
        },
        {
          "pagePath": "/youfan_market/pages/user/index",
          "text": "個人",
          "iconPath": "/youfan_market/resource/images/tabBar/user.png",
          "selectedIconPath": "/youfan_market/resource/images/tabBar/user.png"
        }
      ]
    }
  },

2、自定義組件

關於圖標資源就不發了，須要的本身去iconfont找

在小程序根目錄建立組件文件夾 tabbarComponent

tabbar.js

// tabBarComponent/tabBar.js
const app = getApp();
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    tabbar: {
      type: Object,
      value: {
        "backgroundColor": "#ffffff",
        "color": "#979795",
        "selectedColor": "#1c1c1b",
        "list": []
      }
    }
  }, 
  /**
   * 組件的初始數據
   */
  data: {
    isIphoneX:false // app.globalData.systemInfo.model == "iPhone X" ? true : false,
  },

  /**
   * 組件的方法列表
   */
  methods: { 
  }, 
})

 

tabbar.json

{
  "component": true,
  "usingComponents": {}
}

tabbar.wxml

<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
  <block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
    <navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}" open-type="navigate">
      <view class='special-wrapper'><image class="tabbar_icon" src="{{item.iconPath}}"></image></view>
      <image class='special-text-wrapper'></image> 
      {{item.text}}
    </navigator>
    <button wx:elif='{{item.isShare}}' class="tabbar_nav tabbar_btn" hover-class="none" style="color:{{tabbar.color}};border-radius:90%;" open-type="share">
      <image class="tabbar_icon" src="{{item.iconPath}}"></image> 
      {{item.text}}
    </button>
    <!-- <navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="redirect">
      <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
      <text>{{item.text}}</text>
    </navigator> -->
    <navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
      <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image> 
      {{item.text}}
    </navigator>
  </block>
</view>

tabbar.wxss

.tabbar_box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
  height: 98rpx;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

.tabbar_box.iphoneX-height {
  padding-bottom: 66rpx;
}

.middle-wrapper {
  position: absolute;
  right: 310rpx;
  bottom: 0;
  background-color: #fff;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
}

.middle-wrapper.iphoneX-height {
  bottom: 66rpx;
}

.tabbar_nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;
  height: 100%;
  position: relative;
}

.tabbar_btn {
  padding: 0;
  border: none;
  background: #ff731d;
}

.tabbar_icon {
  width: 50rpx;
  height: 50rpx;
}

.special-wrapper {
  position: absolute;
  left: 77rpx;
  top: -36rpx;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  padding: 6rpx;
}

.special-wrapper .tabbar_icon {
  width: 84rpx;
  height: 84rpx;
}

.special-text-wrapper {
  width: 56rpx;
  height: 56rpx;
}

 

3、頁面調用

js

var app = getApp()
Page({
  data: {
    tabbar: {}, 
  },
  onLoad: function(options) { 
    app.editTabbar();
    
  },
  onReady: function () {
    app.hideTabBar();
  },
  onShow: function () {
    app.hideTabBar(); 
  }, 

json

{
  "enablePullDownRefresh": false,
  "usingComponents": {
    "tabbar": "../../tabbarComponent/tabbar"
  }
}

wxml 底部添加

<tabbar tabbar="{{tabbar}}"></tabbar>

 

OK，萬事大吉了

最後要說的沒源碼，沒時間去弄

推薦一篇別人的寫的：https://www.jianshu.com/p/2cd4a23b504b