前言

接上文，微信小程序非首页使用Tabbar
如果想要实现自定义的tab效果，例如中间的tab样式为凸出展示，如下图，该怎么实现呢？

预期效果图

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;
}

此时预览，可以实现预期效果图中效果，但是点击下面的tab时，会出现页面展示错乱的情况，那么这么解决这个情况嘞？接着看...

app.js（微信开发工具一些新版本中叫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)
        // 发送 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({
  /**
   * 页面的初始数据
   */
  data: {

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow(){
    app.getCurrentTabbar(0,this);
  }
})

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

注意

不知道从那个版本开始，微信小程序的js文件改成了ts文件，但是里面的功能都是一样，没感觉到啥大的变化。所以以上的代码在新版本的微信开发工具中可能会出现警告，无需特别在意，有兴趣可自行研究下。

最后

1.以上的icon资源是从网上找的，找不到出处了。这里是做学习使用，如有侵权，请联系我删除
2.特别感谢 安琪拉屎大佬 的文章
3.实现比较简单，就不专门整个demo了，如果有需求，请移步 github https://github.com/ZhangKKKK/wechart-cusrom-tabbar