客服消息contact-button微信小程序提供的contact-button
客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话。比较坑的是只有点到消息的图标按钮才会起作用,而且大小不能随意控制,但我们有时需要更大空间去触发按钮,所有用下面方法解决。---wxml
<view class="fix flex"> <view class="wd50 zx ss"> <contact-button class="contact" type="default-light" size="12" session-from="weapp" style="position:absolute;top:30rpx;left:60rpx;"> </contact-button> <contact-button class="contact" type="default-light" size="12" session-from="weapp" style="opacity:0;position:absolute;top:30rpx;left:100rpx; "> </contact-button> <contact-button class="contact" type="default-light" size="12" session-from="weapp" style="opacity:0;position:absolute;top:30rpx;left:140rpx; "> </contact-button> <contact-button class="contact" type="default-light" size="12" session-from="weapp" style="opacity:0;position:absolute;top:30rpx;left:200rpx; "> </contact-button> <text style="position:relative;">在线咨询</text> </view> <view class="wd50 dh ss" bindtap="phonecontact"> <label class="icimg iconfont icon-dianhua"></label> <text>电话咨询</text> </view></view>
主要就是多放上几个contact-button按钮,按钮都设置绝对定位position:absolute;opacity:0;然后调整位置,这样点击文字也会触发