小程序中客服的实现加页面UI

效果图

2022-03-07_184428.png

实现步骤

UI样式

采用按钮button方式实现

代码语言：javascript复制

<button class="ke-fu" open-type="contact" bindcontact="handleContact">
    <image class="kefu-img" src="../../images/kefu.png"></image>
    <view class="kf-kf">客服</view>
  </button>

css样式文件

代码语言：javascript复制

.ke-fu {
  margin-left: 640rpx!important;
  width: 12%!important;
  position: fixed;
  bottom: 0;
  margin-bottom: 80rpx;
  text-align: center;
  z-index: 2;
  border: 1px solid #f4ebde;
  border-radius: 50%;
  height: 90rpx;
  background: #f4ebde;
  box-shadow: 2rpx 5rpx 10rpx 5rpx #DBD7D5;
}

.kefu-img {
  width: 50rpx;
  height: 50rpx;
}

.kf-kf {
  vertical-align: top;
  margin-top: -50rpx;
  font-size: 20rpx;
  color: #00ACED;
}

这里需要注意如果你的按钮画出来不是圆形的多半是没有合理调整样式，需要样式穿透!important

js文件：

代码语言：javascript复制

open-type="contact" 

css button ui

0 人点赞