微信小程序客服消息按钮太小解决方法contact-button

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