微信小程序客服消息按鈕太小解決方法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;然後調整位置，這樣點擊文字也會觸發