微信小程序> 微信小程序联系客服按钮样式修改

微信小程序联系客服按钮样式修改

浏览量:1761 时间: 来源:Lucky_Aimee

  在页面中使用<button open-type="contactr/>或者<contact-button size='30'></contact-button>可以显示进入客服会话按钮。这时候联系客服按钮的样式就是固定的,怎样能够修改为我们自己想要的效果咧!

  这是我在项目中需要实现的客服按钮,实现做法如下:

 小程序

1. 结构:

<view class="contact-btn"><view class='contact-list'><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button><contact-button size='30'></contact-button></view><image mode='widthFix' src="../../images/contact.png" class="user-ads-rImg"></image><text class='color-white'>联系在线客服</text></view>

 

2. 样式:

.contact-btn {height: 80rpx;margin: 40rpx 0;position: relative;display:flex;align-items:center;justify-content:center;background-color:#f56259;} .contact-btn image {width: 52rpx;height: 48rpx;margin-top: 10rpx;margin-right: 10rpx;} .contact-list {position: absolute;top: 0;left: 0;width: 100%;height: 80rpx;z-index: 100;overflow: hidden;opacity: 0;}

       在类名为contact-list 的容器,我们给他和我们写的按钮一样的高宽并定位在伪按钮之上,在它的里面放上足够多的客服会话按钮,多出的隐藏。实际上就是将足够多的客服会话按钮定位在我们写的伪按钮上面,并给它的透明度为0,这样我们表面上按得是我们自己写的伪按钮;实际上按得还是客服会话按钮

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎