【干货#003】自定义小程序客服按钮

最新推荐文章于 2024-07-02 20:51:41 发布

mingciong

最新推荐文章于 2024-07-02 20:51:41 发布

阅读量1k

点赞数

分类专栏：小程序前端文章标签：小程序 ui 移动微信

本文链接：https://blog.csdn.net/mingciong/article/details/78538565

版权

小程序前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

缘起

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

目标

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

实现

第1步

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

 
 <view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    <view class="weui-cell__hd">
        <image src="feedback.png" style="margin-right: 5px;vertical-align: middle;width:40rpx; height: 40rpx;">
        </image>
    </view>
    <view class="weui-cell__bd">客服</view>
    <!-- contact-button平铺 -->
</view>

第2步

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

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

 
 <block wx:for-items="{{[1,2,3,4,5,6,7,8,9,10,11,12,13]}}" wx:key="*this">
        <contact-button size="20" session-from="weapp" style="left:{{50*item}}rpx;position: absolute;opacity:0;" >
        </contact-button>
</block>

参考

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

缘起

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

目标

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

实现

第1步

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

  
  <view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    <view class="weui-cell__hd">
        <image src="feedback.png" style="margin-right: 5px;vertical-align: middle;width:40rpx; height: 40rpx;">
        </image>
    </view>
    <view class="weui-cell__bd">客服</view>
    <!-- contact-button平铺 -->
</view>

第2步

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

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

  
  <block wx:for-items="{{[1,2,3,4,5,6,7,8,9,10,11,12,13]}}" wx:key="*this">
        <contact-button size="20" session-from="weapp" style="left:{{50*item}}rpx;position: absolute;opacity:0;" >
        </contact-button>
</block>

参考

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

缘起

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

目标

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

实现

第1步

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

   
   <view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    <view class="weui-cell__hd">
        <image src="feedback.png" style="margin-right: 5px;vertical-align: middle;width:40rpx; height: 40rpx;">
        </image>
    </view>
    <view class="weui-cell__bd">客服</view>
    <!-- contact-button平铺 -->
</view>

第2步

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

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

   
   <block wx:for-items="{{[1,2,3,4,5,6,7,8,9,10,11,12,13]}}" wx:key="*this">
        <contact-button size="20" session-from="weapp" style="left:{{50*item}}rpx;position: absolute;opacity:0;" >
        </contact-button>
</block>