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

要实现的效果:

在写项目的过程中,可能会遇见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, //默认显示的tablist: [ /*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: {//点击tabonChange(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; //* 按钮透明就不会挡住iconleft: 20%; // * 偏移量, 计算: width * index}.activeButton{color: #07c160; /* 因为默认的tab被挡住了点击事件,我们聚焦时需要改变文字颜色}.serverText {font-size: 12px;line-height: 12px;}

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