微信小程序實現自定義tabbar

效果圖:

描述：

實現自定義的tab欄，點擊 【教輔】、【個人】就切換tab，底部還會顯示tabBar，可是點擊中間的【福】，須要跳到新的頁面。

坑1：
（1）在custom-tab-bar/index裏面是沒法wx.navigateTo跳轉的，只能使用switchTab。那麼咱們的【福】要怎樣跳轉呢。在app.json裏面的tabbar 裏面的list裏去掉關於【福】的相關pagePath等配置。

自定義tabBar官網地址

相關代碼以下：

（1）在根目錄下新建文件：

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

（2）在app.json裏面配置：

"tabBar": {
    "custom": true,    // 自定義的，必須設置奧
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/bar/teach/teach-assistant",
        "text": "教輔"
      },
      {
        "pagePath": "pages/bar/my/my",
        "text": "個人"
      }
    ]

（3）自定義的tabBar    custom-tab-bar/index.js

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#666666",
    fontWeight:'bold',
    list: [
      {
        pagePath: "/pages/bar/teach/teach-assistant",
        text: "教輔",
        isSpecial:false
      },
      {
        pagePath: "/pages/bar/bless/bless",
        iconPath: "/images/icon/fu.png",
        selectedIconPath: "/images/icon/fu.png",
        text: "",
        isSpecial: true
      },
      {
        pagePath: "/pages/bar/my/my",
        text: "個人",
        isSpecial: false
      }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const idx = e.currentTarget.dataset.index
      const path = e.currentTarget.dataset.path
      this.setData({
        selected: idx
      })
      if (this.data.list[idx].isSpecial){
        wx.navigateTo({
          url: path,
        })
        console.log(path)
      }else{
        wx.switchTab({
          url: path,
        })
      }
      console.log(this.data.selected, idx);
    }
  }
})

自定義的tabBar    custom-tab-bar/index.json

{
  "component": true
}

自定義的tabBar    custom-tab-bar/index.wxml

<!-- 自定義tab -->
<view class="tab-bar">
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <view class="center_part" wx:if="{{item.iconPath}}">
      <image class="center_img center-has-noimg" src="../images/icon/fu-top.png"></image>
      <image class="center_img center-has-image" src="{{item.iconPath}}"></image>
    </view>
    <view class="txt fontWeight" wx:if="{{selected === index}}" style="color: {{selected === index ?selectedColor : color}}">
      {{item.text}}
      <view class="bg_rec"></view>
    </view>
    <view class="txt" wx:if="{{selected != index}}">{{item.text}}</view>
  </view>
</view>

自定義的tabBar    custom-tab-bar/index.wxss

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150rpx;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 30rpx 30rpx 0 0;
  border-top: 1px solid #eaeaea;
  z-index: -1;
}
 
.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
 
.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}
 
.tab-bar-item cover-view {
  font-size: 10px;
}
.txt{
  font-size: 40rpx;
  color: #aaaaaa;
}
.fontWeight{
  font-weight: bold;
}
.bg_rec{
  background: #ffd324;
  width: 80rpx;
  min-height: auto;
  height: 20rpx;
  margin-top: -28rpx;
  vertical-align: text-bottom;
  border-radius: 0;
  z-index: -10;
}
.center_img{
  width: 120rpx;
  height: 120rpx;
  position: fixed;
  transform: translate(-50%);
  left: 50%;
  bottom:0;
}
.center-has-noimg{
  bottom: 26px;
  z-index: 10;
}
.center-has-image{
  bottom: 20px;
  z-index: 11;
}

（4）在tabBar跳轉的頁面，也就是tab 選中狀態下，要在當前頁面下，經過 getTabBar 接口獲取組件實例，並調用 setData 更新選中態。

const app = getApp()
Page({
  data: {
    
  },
  onShow(){
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 2    // 根據tab的索引值設置
      })  
    }
  }
})

---

以爲對本身有幫助就點個贊👍呀。