客服消息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;然后调整位置,这样点击文字也会触发