【微信小程序】把客服按钮替换成自己想要的图片

版权声明:本文为博主原创文章,未经博主允许不得转载。如需开发微信小程序可加微信: 13977284413 https://blog.csdn.net/qq_35713752/article/details/77980177

 有问题可以扫码加我微信,有偿解决问题。承接小程序开发。

微信小程序开发交流qq群   173683895  、 526474645 ;

正文:

今天开发微信客服的功能,发现微信提供的</contact-button> 的默认图片样式是真的丑,所以想替换成自己想要的图片样式,并且点击图片能够有同样的效果。下面看一下对比,微信小程序开发交流QQ群招人啦,群号(173683895)欢迎加入

做成这样之后是不是感觉舒服多了? 废话不多说,直接上代码:

实现原理:把原生的contact-button组件设置透明并用绝对定位放在左边保证不占位置,再展示理想的图片放在contact-button的位置

//index.wxml    
<view class="df_1 l_h15">
        <contact-button size="22" class='pos'></contact-button>
          <image class="icon_kf" src="/images/kefu.png"></image>  
        <view class="dbtext">客服</view>
    </view>

//index.wxss  


 
.pos{
  position: absolute;
  top: 10px;
  left: 23px;
  opacity: 0;
}
.icon_kf{
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-top: 5px;
}
.dbtext{
  line-height: 15px;
  color: #666;
  font-size: 12px;
}
//下面是最外层的view的样式,可以要也可以不要
.df_1{
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-tap-highlight-color: transparent;
}
.l_h15{
  line-height: 15px;
  text-align: center;
}

 

 

 
展开阅读全文

没有更多推荐了,返回首页