微信小程序自定义tabbar (会话客服) Vant组件

要实现的效果:

image.png

在写项目的过程中,可能会遇见ui设计会话客服放在tabbar上的情况,但是会话消息必须通过button触发,然鹅小程序的默认tabbar层级最高,没办法再上面添加button事件,这时,我们就需要实现一个自定义tabbar, 我用的是Vant ui组件库,其它的也行,主要原理就是tabbar上放一个按钮,挡住原本的tab就行啦!
Vant 小程序官网(一定要是小程序版本的哟,之前引入了vue版本的,实现不了,排查了好久问题)
小程序自定义tabbar官网教程

第一步:

//app.json  json文件不能写注释,但是为了提示重要步骤,我写了哈哈
"tabBar": {
    "custom": true,  //开启自定义tabbar
    "color": "#1B1B1B",
    "selectedColor": "#00c56b",
    "borderStyle": "black",
    "backgroundColor": "#fafbfe",
    "list": [ 
 //tabbar的路径,虽然是自定义了,还是得将所有的路径写上,
/* *重点: 你可能会发现客服的tabbar不见了,这是因为我们客服也需要绑定一个页面(自定义跳转需要绑定跳转路径),
如果这里写了的话就会出现点击了客服,再返回就显示绑定的空白页面,
这肯定不是我们想要的,所以这里不写,就会返回上一个页面路径,不会出现空白页*/
      {
        "pagePath": "pages/groupChat/groupChat",
        "text": "群聊"
      },
      
      {
        "pagePath": "pages/newMessage/newMessage",
        "text": "资讯"
      },
      {
        "pagePath": "pages/newChat/newChat",
        "text": "聊天"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  },
  "usingComponents": { //这两个是我们引入的vant tabbar组件,也可在页面json引用,看你自己代码习惯,这里引入的全局可用
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
  }

第二步: 在代码根目录添加 tabBar 代码入口文件:

官方文档也有说明

第三步:

//custorm-tab-bar/index.wxml页面
<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" />
<!-- 调起会话客服的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页面
Component({
  data: { 
    active:0, //默认显示的tab
    list: [ 
 /*tabbar路径,其实van-tabbar-item的循环数据是可以写在这里面的,
比如点击前的图片,和点击后的图片路径之类的,然后在wxml页面wx:for循环即可 */
      { pagePath: "/pages/groupChat/groupChat", },
      {pagePath: "/pages/serverPage/serverPage", },
      {pagePath: "/pages/newMessage/newMessage",},
      { pagePath: "/pages/newChat/newChat", },
      { pagePath: "/pages/mine/mine", }
    ]
  },
  methods: {
//点击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({  //切换页面
         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页面
image{
  width: 30px;
   height: 18px;
}
button::after {
  border: none;  //去除默认button的边框
  }
button {
  background: #ffffff;
  font-size: 24rpx;
  line-height: 24rpx;
}
  .button-hover{
    background: #ffffff;  //去除默认button的背景色
  }
  .serverButton { 
 //重点: 我们的客服btn是固定定位放在tabbar上的,我们要完全挡住tab点击事件,需要根据它的位置进行定位
//关键css 注释有*号
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;  // * 固定定位
    width: 20%;  //* 看你的tab有几个,计算: 100% / tab个数
    bottom: 0;  // *
    height: 100rpx;  //*tab的高度
    opacity: 0;  //* 按钮透明就不会挡住icon
    left: 20%;  // * 偏移量, 计算: width * index
  }
  .activeButton{
    color: #07c160; /* 因为默认的tab被挡住了点击事件,我们聚焦时需要改变文字颜色
  }
  .serverText {
    font-size: 12px;
    line-height: 12px;
  }

每个tabbar页面

//page.js
onShow(){
 this.getTabBar().init();  //一定要写这句代码,不然可能会出点击切换tabbar页面切换了,tabbar按钮没有切换的情况**
}

总结: 重要的步骤都有注释,只要你引入组件正确,应该复制代码即可用,图片路径需要改成你的本地图片路径哈哈,不懂组件内的参数,官方文档也有介绍

微信小程序 自定义tabbar (会话客服) Vant组件

微信小程序自定义tabbar (会话客服) Vant组件