在页面中使用<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,这样我们表面上按得是我们自己写的伪按钮;实际上按得还是客服会话按钮,














