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

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