微信小程序-联系客服按钮样式修改
2018-03-29 14:48
816 查看
在页面中使用<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,这样我们表面上按得是我们自己写的伪按钮;实际上按得还是客服会话按钮,
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,这样我们表面上按得是我们自己写的伪按钮;实际上按得还是客服会话按钮,
相关文章推荐
- 微信小程序客服消息相关(客服按钮修改)
- 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
- 微信小程序循环列表添加默认事件,默认样式,点击后修改样式
- 微信小程序组件 contact-button(客服会话按钮)详解及实例代码
- 微信小程序修改swiper默认指示器样式的实例代码
- 微信小程序添加悬浮在线客服会话按钮
- 微信小程序点击控件修改样式
- 微信小程序 动态绑定事件 且通过事件修改样式
- 微信小程序 JS动态修改样式
- 微信小程序--修改checkbox和radio的样式
- 微信小程序中添加客服按钮contact-button功能
- 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
- 微信小程序 动态绑定事件并实现事件修改样式
- 【微信小程序教程】点击按钮修改view标签背景颜色
- 【微信小程序教程】点击按钮修改文字大小
- 【微信小程序】把客服按钮替换成自己想要的图片
- 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
- 微信小程序 JS动态修改样式的实现代码
- 微信小程序: button 修改样式
- 微信小程序点击控件修改样式