缘起

小程序官方客服按钮长度固定（18-27px）不说，且只有 dark和light两种样式，说句实在话还有点丑。  

目标

做一个如下所示的菜单，点击区域包含整个屏幕宽度。 

实现

第1步

使用WEUI控件实现如上图所示的客服菜单。

1. <view class="weui-cell weui-cell_access" hover-class="weui-cell_active">

2.    <view class="weui-cell__hd">

3.        <image src="feedback.png" style="margin-right: 5px;vertical-align: middle;width:40rpx; height: 40rpx;">

4.        </image>

5.    </view>

6.    <view class="weui-cell__bd">客服</view>

7.    <!-- contact-button平铺 -->

8. </view>

第2步

用 absolute定位，重复放置contact-button的方式铺满整个区域，将样式设置纯透明opacity:0。

将如下代码放在上述代码注释处即可。

1. <block wx:for-items="{{[1,2,3,4,5,6,7,8,9,10,11,12,13]}}" wx:key="*this">

2.        <contact-button size="20" session-from="weapp" style="left:{{50*item}}rpx;position: absolute;opacity:0;" >

3.        </contact-button>

4. </block>

参考

• 微信小程序自定义微信客服按钮: http://www.myjscode.com/page/article14.html