微信小程序 button样式设置为图片的方法

(编辑:jimmy 日期: 2024/10/31 浏览:2)

下面通过多种方法给大家介绍微信小程序 button 的样式设置为图片,具体内容如下所示:

方法一:button 与 image 重叠

将button设为 opacity:0 然后定位放在那副图片的上边。

方法二:background-image

background-image。背景图片是不支持在css中被引用资源的,但可以使用网络资源。

<button open-type='share' class="share" style="background-image:url(https://example.com/imgs/icon_2_forward@2x.png);" plain='true'>
</button>

wxss

.goBack .share{
 width: 38rpx;
 height: 36rpx;
 padding:0 20rpx;
 position: absolute;
 right: 32rpx;
 top: 0;
 bottom: 0;
 margin: auto;
 background-size: 38rpx 36rpx;
 background-repeat:no-repeat;
 border:none;
}

background-size与background-repeat与border:none;是button必须的

方法三:base64

什么情况下使用base64格式?条件:如果图片足够小且因为用处的特殊性无法被制作成雪碧图(CssSprites),在整个网站的复用性很高且基本不会被更新。

方法四:button 嵌套 image

实例:

 <button class="btn">
<image src="/UploadFiles/2021-04-02/img.png">

PS:下面看下微信小程序把客服按钮替换成自己想要的图片

正文:

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

 微信小程序 button样式设置为图片的方法微信小程序 button样式设置为图片的方法 做成这样之后是不是感觉舒服多了? 废话不多说,直接上代码:

实现原理:把原生的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="/UploadFiles/2021-04-02/kefu.png">

//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;
}

总结

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。