微信小程式自定義 Tab custom-tab-bar 點選重新整理，回到首頁

阿新 • • 發佈：2020-09-01

前言：

微信專案中需要做個二維碼的功能，顯示的時候要突出出來，So, 只能自定義了，先看一下我們要做成這個樣子，看到這個陰影是不是有點恐慌，不要怕，很簡單

一、修改app.json 檔案，將tabBar修改為自定義tab，list 保持不變，最多5個

  "tabBar": {
    "selectedColor": "#FB7F32",
    "borderStyle": "white",
    "custom": true, // 自定義tab
    "usingComponents": {},
　　
    "list": [
      {
        "pagePath": "pages/Home/index",
        "iconPath": "image/home.png",
        "selectedIconPath": "image/homeActive.png",
        "text": "元件"
      },
      {
        "pagePath": "pages/Message/index",
        "iconPath": "image/message.png",
        "selectedIconPath": "image/messageActive.png",
        "text": "訊息中心"
      },
      {
        "pagePath": "pages/Home/index",
        "iconPath": "image/qrCode.png",
        "selectedIconPath": "image/qrCode.png",
        "text": ""
      },
      {
        "pagePath": "pages/Home/index",
        "iconPath": "image/order.png",
        "selectedIconPath": "image/orderActive.png",
        "text": "訂單"
      },
      {
        "pagePath": "pages/Home/index",
        "iconPath": "image/mine.png",
        "selectedIconPath": "image/mineActive.png",
        "text": "我的"
      }
    ]

二、在專案的根目錄新建 custom-tab-bar，這個檔案就是微信已經幫我們定義好了，只需要新增檔案，就可以微信自動讀取

三、custom-tab-bar/index.wxml 寫入，官網中提供，使用cover-view 標籤來操作，目前我這邊是使用view，因為cover-view 在向上滑動的時候，會帶著tab 一起拖上去，不太好看，

<view class="tab-bar" style="background: url('{{background}}') no-repeat; background-size: 100% auto">
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab" >
    <view class="center_part" >
      <view class="center_part_code" wx:if="{{item.isSpecial}}">
        <image class=" center-has-noimg" src="../image/qrCode.png" ></image>
      </view>
      <image class=" center-has-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}" wx:else></image>
    </view>
    <view style="color: {{selected === index ? selectedColor : color}}" class="cover-text">{{item.text}}</view>
  </view>
</view>

四、custom-tab-bar/index.js 寫入

const app = getApp()

Component({
  data: {
    selected: 0, // 目前tab所在的index 
    color: "#999", // 未選中顏色
    selectedColor: "#D0021B", // 選中顏色
　　// tab 自定義配置需與index.json 保持一致
    list: [{
      pagePath: "/pages/Home/index",
      iconPath: "../image/home.png",
      selectedIconPath: "../image/homeActive.png",
      text: "首頁",
      isSpecial: false
    }, {
      pagePath: "/pages/Message/index",
      iconPath: "../image/message.png",
      selectedIconPath: "../image/messageActive.png",
      text: "訊息中心",
      isSpecial: false
    }, {
      pagePath: "/pages/pay/index",
      iconPath: "image/icon_API.png",
      selectedIconPath: "image/icon_API_HL.png",
      text: "",
      isSpecial: true
    },  {
      pagePath: "/index/index2",
      iconPath: "../image/order.png",
      selectedIconPath: "../image/orderActive.png",
      text: "歷史訂單",
      isSpecial: false
    }, {
      pagePath: "/index/index2",
      iconPath: "../image/mine.png",
      selectedIconPath: "../image/mineActive.png",
      text: "我的",
      isSpecial: false
    }],
  },
  methods: {
 
　　// 切換 tab 事件
    switchTab(e) {
      let that = this
      const idx = e.currentTarget.dataset.index
      const path = e.currentTarget.dataset.path

      // 跳轉頁面
      wx.switchTab({
         url: path,
      })

      that.setData({
        selected: idx
      })
    }
  }
})

五、custom-tab-bar/index.wxss 寫入

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90rpx;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 99;
  position: relative;
  padding-top: 17rpx;
}
 
.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-text {
  font-size: 10px;
}
.txt{
  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: 100rpx;
  height: 100rpx;
  transform: translate(-50%);
  left: 50%;
  bottom:0;
}
.center-has-noimg{
  width: 100%;
  height: 100%;
}
.center-has-image{
  width: 35rpx;
  height: 35rpx;  
}
.center_part_code{
  padding: 10rpx;
  box-shadow: 0 0 0 #000;
  /* width: 100rpx;
  height: 100rpx; */
  position: absolute;
  top: -30px;
  z-index: 10;
  width: 106rpx;
  height: 106rpx;
  transform: translate(-50%);
  left: 50%;
}

六、檢視效果

發現：view 一直定在下部，滑動的時候不太好看，我這邊在每個switchTab頁面的json 中配置了，禁止滾動，在頁面內給父級設定 overflow： scroll，（ switchtab頁面為tabBar 中list 配置的頁面）

七、總結問題

1. 進入首頁，點選其他tab，頁面會重新整理，tabindex 會再次回到首頁

　　解決方案：在每個 switchtab頁面中寫入以下，（ switchtab頁面為tabBar 中list 配置的頁面）

  onShow:function (params) {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0  // 數字是當前頁面在tabbar的索引,如我的查詢頁索引是2，因此這邊為2，同理首頁就為0，訊息中心頁面為1
      })
    }
  },