image.png

在寫(xiě)項(xiàng)目的過(guò)程中,可能會(huì)遇見(jiàn)ui設(shè)計(jì)會(huì)話客服放在tabbar上的情況,但是會(huì)話消息必須通過(guò)button觸發(fā),然鵝小程序的默認(rèn)tabbar層級(jí)最高,沒(méi)辦法再上面添加button事件,這時(shí),我們就需要實(shí)現(xiàn)一個(gè)自定義tabbar, 我用的是Vant ui組件庫(kù),其它的也行,主要原理就是tabbar上放一個(gè)按鈕,擋住原本的tab就行啦!
Vant 小程序官網(wǎng)(一定要是小程序版本的喲,之前引入了vue版本的,實(shí)現(xiàn)不了,排查了好久問(wèn)題)
小程序自定義tabbar官網(wǎng)教程

第一步:

//app.json  json文件不能寫(xiě)注釋,但是為了提示重要步驟,我寫(xiě)了哈哈
"tabBar": {
    "custom": true,  //開(kāi)啟自定義tabbar
    "color": "#1B1B1B",
    "selectedColor": "#00c56b",
    "borderStyle": "black",
    "backgroundColor": "#fafbfe",
    "list": [ 
 //tabbar的路徑,雖然是自定義了,還是得將所有的路徑寫(xiě)上,
/* *重點(diǎn): 你可能會(huì)發(fā)現(xiàn)客服的tabbar不見(jiàn)了,這是因?yàn)槲覀兛头残枰壎ㄒ粋€(gè)頁(yè)面(自定義跳轉(zhuǎn)需要綁定跳轉(zhuǎn)路徑),
如果這里寫(xiě)了的話就會(huì)出現(xiàn)點(diǎn)擊了客服,再返回就顯示綁定的空白頁(yè)面,
這肯定不是我們想要的,所以這里不寫(xiě),就會(huì)返回上一個(gè)頁(yè)面路徑,不會(huì)出現(xiàn)空白頁(yè)*/
      {
        "pagePath": "pages/groupChat/groupChat",
        "text": "群聊"
      },
      
      {
        "pagePath": "pages/newMessage/newMessage",
        "text": "資訊"
      },
      {
        "pagePath": "pages/newChat/newChat",
        "text": "聊天"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  },
  "usingComponents": { //這兩個(gè)是我們引入的vant tabbar組件,也可在頁(yè)面json引用,看你自己代碼習(xí)慣,這里引入的全局可用
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
  }

官方文檔也有說(shuō)明

第三步:

//custorm-tab-bar/index.wxml頁(yè)面
<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#07c160" inactive-color="#1b1b1b">
  <van-tabbar-item >
    <image slot="icon" src="/images/tabbar/groups.png" mode="aspectFit" />
    <image slot="icon-active" src="/images/tabbar/groups_on.png" mode="aspectFit" />
    群聊
  </van-tabbar-item>
  <van-tabbar-item>
    <image slot="icon" src="/images/tabbar/server.png" mode="aspectFit" />
      <image slot="icon-active" src="/images/tabbar/serverActive.png" mode="aspectFit" />
<!-- 調(diào)起會(huì)話客服的button-->
      <button class="serverButton"  hover-class="btn-hover" openType="contact"> </button>
      <text class="hintText">客服</text>
  </van-tabbar-item>  
  <van-tabbar-item  >
<!--未選中顯示的icon-->
    <image slot="icon" src="/images/tabbar/msg.png" mode="aspectFit" />
<!--選中顯示的icon-->
    <image slot="icon-active" src="/images/tabbar/msgActive.png" mode="aspectFit" />
    資訊
  </van-tabbar-item>
  <van-tabbar-item >
    <image slot="icon" src="/images/tabbar/groupChat.png" mode="aspectFit" />
    <image slot="icon-active" src="/images/tabbar/groupChatActive.png" mode="aspectFit" />
    聊天
  </van-tabbar-item>

  <van-tabbar-item >
    <image slot="icon" src="/images/tabbar/my.png" mode="aspectFit" />
    <image slot="icon-active" src="/images/tabbar/myActive.png" mode="aspectFit" />
    我的
  </van-tabbar-item>
</van-tabbar>

//custorm-tab-bar/index.js頁(yè)面
Component({
  data: { 
    active:0, //默認(rèn)顯示的tab
    list: [ 
 /*tabbar路徑,其實(shí)van-tabbar-item的循環(huán)數(shù)據(jù)是可以寫(xiě)在這里面的,
比如點(diǎn)擊前的圖片,和點(diǎn)擊后的圖片路徑之類的,然后在wxml頁(yè)面wx:for循環(huán)即可 */
      { pagePath: "/pages/groupChat/groupChat", },
      {pagePath: "/pages/serverPage/serverPage", },
      {pagePath: "/pages/newMessage/newMessage",},
      { pagePath: "/pages/newChat/newChat", },
      { pagePath: "/pages/mine/mine", }
    ]
  },
  methods: {
//點(diǎn)擊tab
    onChange(e) {
      //  console.log(e,'e',this.data.active)
       this.setData({ active: e.detail });  //切換tab
      //  console.log(this.data.active,"active",e.detail)
       wx.switchTab({  //切換頁(yè)面
         url: this.data.list[e.detail].pagePath
       });
    },
    init() {
        const page = getCurrentPages().pop();
        this.setData({
       　  active: this.data.list.findIndex(item => item.pagePath === `/${page.route}`)
        });
       }
    }
})

//custorm-tab-bar/index.wxss頁(yè)面
image{
  width: 30px;
   height: 18px;
}
button::after {
  border: none;  //去除默認(rèn)button的邊框
  }
button {
  background: #ffffff;
  font-size: 24rpx;
  line-height: 24rpx;
}
  .button-hover{
    background: #ffffff;  //去除默認(rèn)button的背景色
  }
  .serverButton { 
 //重點(diǎn): 我們的客服btn是固定定位放在tabbar上的,我們要完全擋住tab點(diǎn)擊事件,需要根據(jù)它的位置進(jìn)行定位
//關(guān)鍵css 注釋有*號(hào)
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;  // * 固定定位
    width: 20%;  //* 看你的tab有幾個(gè),計(jì)算: 100% / tab個(gè)數(shù)
    bottom: 0;  // *
    height: 100rpx;  //*tab的高度
    opacity: 0;  //* 按鈕透明就不會(huì)擋住icon
    left: 20%;  // * 偏移量, 計(jì)算: width * index
  }
  .activeButton{
    color: #07c160; /* 因?yàn)槟J(rèn)的tab被擋住了點(diǎn)擊事件,我們聚焦時(shí)需要改變文字顏色
  }
  .serverText {
    font-size: 12px;
    line-height: 12px;
  }

每個(gè)tabbar頁(yè)面

//page.js
onShow(){
 this.getTabBar().init();  //一定要寫(xiě)這句代碼,不然可能會(huì)出點(diǎn)擊切換tabbar頁(yè)面切換了,tabbar按鈕沒(méi)有切換的情況**
}

總結(jié): 重要的步驟都有注釋,只要你引入組件正確,應(yīng)該復(fù)制代碼即可用,圖片路徑需要改成你的本地圖片路徑哈哈,不懂組件內(nèi)的參數(shù),官方文檔也有介紹