微信小程序自定義tabbar解決方案（可用於解決tabbar跳轉至分包頁面問題）

我在學習微信小程序的過程當中，搜集了很多微信小程序自定義tabbar的資料，發現說的都是很復雜，看了很久才摸索出來，於是今天我整理一下我目前所使用的方法吧。

需求：我需要實現使用自定義tabbar跳轉三個頁面的方式，其中一個頁面不顯示tabbar

 

如圖，三個按鈕分別跳轉到三個不同的頁面，這里我的跳轉路徑分別為

首頁："/pages/shouye/shouye",

我的："/pages/login/login"

添加：'/libs/home/index',（位於分包中）

 

我們需要在與pages文件夾平級下建立以下文件，切記文件名必須是這個。

 

index.js:

Component({
  data: {
    selected: 0,
    "color": "#a9b7b7",
    "selectedColor": "#000000",
    "borderStyle": "white",
    "add":"add1",
    "list1": [{
      "selectedIconPath": "/images/tabbar/home1.png",  //選中后的icon標志
      "iconPath": "/images/tabbar/home.png",   //跳轉頁面的路徑
      "pagePath": "/pages/shouye/shouye", 
        "text": "首頁",
      },
      {
        "selectedIconPath": "/images/tabbar/personal.png", //選中后的icon標志
        "pagePath": "/pages/login/login", //跳轉頁面的路徑
        "iconPath": "/images/tabbar/personal2.png", //選中前的icon標志
        "text": "我的",
      },
    ],
    "icon1": "/images/tabbar/home1.png",
    "icon2": "/images/add2.png",
    "icon3": "/images/tabbar/personal2.png",
  },
  attached() {},
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      this.setData({
        selected: data.index
      })
      if (data.index == "2") {
        this.setData({
          add:"add2"  //為了點擊后改變中間+號的圖標
        })
        wx.navigateTo({
          url: '/libs/home/index', //因為添加頁面在分包中 因此只能使用wx.navigateTo跳轉 
        })
      } else if (data.index == "3"){
        wx.switchTab({
          url
        })
      } else {
        wx.switchTab({
          url
        })
      }
    },
  },
})

 

index.json:

{
  "component": true
}

index.html:

<view class="tbb" style="background-image: url('https://6831-h15-xc6sb-1300800299.tcb.qcloud.la/tabbar2.png?sign=1f5b8b9e4ef283d7003fc47ec5211819&t=1601437422'); background-size: 100% 100%;">
  <view class="tab-bar-item " data-path="/pages/shouye/shouye" data-index="1" bindtap="switchTab">  //這里的data-index=“1”這個1指定了跳轉的首頁為序號1 在index.js中通過這個序號來跳轉對應的頁面 下面的2 和 3 類同
    <image src=" {{icon1}}"></image>
    <view class="text">首頁</view>
  </view>
  <view class=" {{add}} " data-path="/libs/home/index" data-index="2" bindtap="switchTab">
    <image src=" {{icon2}}"></image>
  </view>
  <view class="tab-bar-item " data-path="/pages/login/login" data-index="3" bindtap="switchTab">
    <image src=" {{icon3}}"></image>
    <view class="text">我的</view>
  </view>
</view>

 index.css

.tbb2{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 30vh;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index:900;
  background:rgb(255,247,251) 
}
.tb1{
 width: 100vw;
 background: firebrick;
 height: 10vh;
 margin-top: 7vh;
}
.img2{
  width: 30rpx;
 height: 30rpx
}
.tbb{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 125rpx;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 800;
}
.tab-bar-item view {
  margin-bottom: -3vh;
  z-index: 820;
}

.tab-bar-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
    z-index: 820;
}
.tab-bar-item image {
    margin-top: 5rpx;
  width: 50rpx;
  height: 50rpx;
    z-index: 820;
}
.text{
  font-size: 20rpx;
}

.add1{
  margin-top: -40rpx;
   z-index: 999;
}
 .add1 image{
  width: 50px;
  height:50px;
  padding:2px;
  background-color: rgba(248, 242, 192, 0.733);
  border-radius:43px;
  z-index: 999;
}
.add2{
  margin-top: -40rpx;
   z-index: 999;
}
 .add2 image{
  width: 50px;
  height:50px;
  padding:2px;
  background-color: rgba(248, 242, 192, 0.733);
  border-radius:43px;
  z-index: 999;
  transform:rotate(45deg); //旋轉45°

}

 

 具體的css 圖片路徑啥的自己修改即可。

 

然后我們需要在小程序的app.json中添加 首頁 和 我的 這兩個需要顯示tabbar頁面的路徑。

 

"style": "v2",
  "tabBar": {
    "custom":true, //隱藏原生小程序的tabbar，這句必須加 "color": "#cdcdcd",
    "selectedColor": "#79d0d2",
    "backgroundColor": "#f1f1f1",
    "list": [
      {
        "pagePath": "pages/shouye/shouye",
        "text": "首頁",
        "iconPath": "/images/tabbar/home.png",
        "selectedIconPath": "/images/tabbar/home1.png"
      },
      {
        "pagePath": "pages/login/login",
        "text": "我的",
        "iconPath": "/images/tabbar/personal2.png",
        "selectedIconPath": "/images/tabbar/personal.png"
      }
    ]
  },

 

 

最后需要分別在 “首頁”、 “我的” 兩個頁面的js中添加一下代碼

 

 

 

 

 shouye.js中添加

  onShow: function() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        "icon3": "/images/tabbar/personal2.png",
        "icon1": "/images/tabbar/home1.png",
        "add": "add1"
      })
    }

login.js

onShow: function() {  
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        "icon3": "/images/tabbar/personal.png",
        "icon1": "/images/tabbar/home.png",
        "add": "add1"
      })
    }

 

備注：為了控制總包大小tabbar背景圖片是上傳到雲開發數據庫的 通過url獲取的。url鏈接（https://6831-h15-xc6sb-1300800299.tcb.qcloud.la/tabbar2.png?sign=1f5b8b9e4ef283d7003fc47ec5211819&t=1601437422

）。

其他icon與對應名稱如下：

 

 

 

中間加號的變化是通過改變css的旋轉角度，在上文中的index.wxss中源碼有寫到。

 

 因為是剛剛學習小程序，有些地方寫的不好，還請大佬指教。