前言

接上文，微信小程序非首頁使用Tabbar
如果想要實現(xiàn)自定義的tab效果，例如中間的tab樣式為凸出展示，如下圖，該怎么實現(xiàn)呢？

預期效果圖

image.png

自定義custom-tab-bar

1.在pages同層級處，新建一個custom-tab-bar文件夾

image.png

index.js

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#015C61",
    list: [
    {
      pagePath: "/pages/a/a",
      iconPath: "/static/a.png",
      selectedIconPath: "/static/a_select.png",
      text: "頁面A"
    }, 
    {
      pagePath: "/pages/tab-code/index",
      iconPath: "/static/d.png",
      selectedIconPath: "/static/d.png",
      text: "",
      isSpecial: true
    }, 
    {
      pagePath: "/pages/b/b",
      iconPath: "/static/b.png",
      selectedIconPath: "/static/b_select.png",
      text: "頁面B"
    }
  ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      console.log(data)
      if (!data.click) {
        const url = data.path
        wx.switchTab({url})
        this.setData({
          selected: data.index
        })
      } else {
        wx.scanCode({
          onlyFromCamera: true,
          success (res) {
            console.log(res)
          },
          fail (err) {
            console.log(err)
            wx.showToast({
              title: '掃碼失敗',
              icon: 'loading',
              duration: 1500
           })
          }
        })
      }
    }
  }
})

index.json

{
  "component": true
}

index.wxml

<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="tab-bar">
  <view class="tab-bar-border"></view>
  <block wx:for="{{list}}" wx:key="index">
    <view wx:if="{{item.isSpecial}}" class="tab-bar-item" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial || false }}" data-index="{{index}}" bindtap="switchTab">
      <view class="special-image">
        <image class="special-image-pic" mode="aspectFit" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
      </view>
      <view style="color: {{selected === index ? selectedColor : color}}" class="special-text tab-text">{{item.text}}</view>
    </view>
    <view wx:else class="tab-bar-item" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial }}" data-index="{{index}}" bindtap="switchTab">
      <image class="item-image" mode="aspectFit" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
      <view class="tab-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
    </view>
  </block>
</view>

index.wxss

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96rpx;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2rpx;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item .item-image {
  width: 36rpx;
  height: 36rpx;
}
.tab-bar-item .special-image {
  position: absolute;
  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;
}
.tab-bar-item .special-image .special-image-pic {
  width: 100%;
  height: 100%;
}

.tab-bar-item .tab-text {
  margin-top: 4rpx;
  font-weight: 600;
}

.tab-bar-item .special-text {
  margin-top: 44rpx
}

.tab-bar-item .tab-text {
  font-size: 10px;
}

此時預覽，可以實現(xiàn)預期效果圖中效果，但是點擊下面的tab時，會出現(xiàn)頁面展示錯亂的情況，那么這么解決這個情況嘞？接著看...

app.js（微信開發(fā)工具一些新版本中叫app.ts）

在app.js中加入getCurrentTabbar()方法，設置tabbar的選中

App<IAppOption>({
  globalData: {},
  onLaunch() {
    // 展示本地存儲能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登錄
    wx.login({
      success: res => {
        console.log(res.code)
        // 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
      },
    })
  },
  //設置tabbar的選中
  getCurrentTabbar(selected, that) {
    if (typeof that.getTabBar === 'function' && that.getTabBar()) {
      that.getTabBar().setData({
        selected: selected
      })
    }
  }
})

頁面的js文件中（以頁面A為例）

在頁面A的onShow()方法中，設置app.getCurrentTabbar(index，this)；index是當前頁面的索引。如果app找不到，就先導入一下 const app = getApp()

// pages/a/a.ts
const app = getApp()
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {

  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow(){
    app.getCurrentTabbar(0,this);
  }
})

頁面B同理，是需要改下index即可。

注意

不知道從那個版本開始，微信小程序的js文件改成了ts文件，但是里面的功能都是一樣，沒感覺到啥大的變化。所以以上的代碼在新版本的微信開發(fā)工具中可能會出現(xiàn)警告，無需特別在意，有興趣可自行研究下。

最后

1.以上的icon資源是從網上找的，找不到出處了。這里是做學習使用，如有侵權，請聯(lián)系我刪除
2.特別感謝 安琪拉屎大佬 的文章
3.實現(xiàn)比較簡單，就不專門整個demo了，如果有需求，請移步 github https://github.com/ZhangKKKK/wechart-cusrom-tabbar