脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序 button样式设置为图片

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

 更新时间：2020年06月19日 14:50:00   作者：亮子介  
这篇文章主要介绍了微信小程序 button 的样式设置为图片的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

下面通过多种方法给大家介绍微信小程序 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="/images/img.png">
</image>
</button>

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

正文：

今天开发微信客服的功能，发现微信提供的</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;
}

总结

到此这篇关于微信小程序 button 的样式设置为图片的文章就介绍到这了,更多相关小程序 button 样式设置为图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS+CSS实现鼠标滑过时动态翻滚的导航条效果

    JS+CSS实现鼠标滑过时动态翻滚的导航条效果

    这篇文章主要介绍了JS+CSS实现鼠标滑过时动态翻滚的导航条效果,涉及JavaScript动态设置css样式动画过度效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • Javascript变量函数声明提升深刻理解

    Javascript变量函数声明提升深刻理解

    本文主要介绍了Javascript变量函数声明提升深刻理解，Javascript变量函数声明提升Hoisting是在Javascript中执行上下文工作方式的一种认识，更多相关知识需要的小伙伴可以参考下面文章详细内容
    2022-06-06
  • 原生js页面滚动延迟加载图片

    原生js页面滚动延迟加载图片

    这篇文章主要介绍了原生js页面滚动延迟加载图片的相关资料,现在瀑布流效果大行其道，各种网站都有应用，尤其是专业的图片类型的网站，感兴趣的朋友可以参考下
    2015-12-12
  • Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

    Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

    上个礼拜修改测试一个后台管理项目，在测试与各个浏览器兼容性的时候，发现在chrome浏览器下showModalDialog方法显示的并不是模态对话框，就像新打开一个页面一样，父窗口仍然可以随意获取焦点，并可以打开多个窗体，而且返回值returnValue也无法返回，一直是undefined
    2016-10-10
  • 微信小程序自定义tab实现多层tab嵌套

    微信小程序自定义tab实现多层tab嵌套

    这篇文章主要为大家详细介绍了微信小程序自定义tab实现多层tab嵌套，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • uni-app中onBackPress()监听页面返回(更新数据)

    uni-app中onBackPress()监听页面返回(更新数据)

    这篇文章主要给大家介绍了关于uni-app中onBackPress()监听页面返回(更新数据)的相关资料,在UniApp中,可以通过监听页面刷新的生命周期函数来监听页面的返回,然后重新调用接口进行刷新,需要的朋友可以参考下
    2023-10-10
  • JavaScript让IE浏览器event对象符合W3C DOM标准

    JavaScript让IE浏览器event对象符合W3C DOM标准

    IE浏览器event对象跟W3C实现的不一样.所以自己封装一个EventUtil类来让IE浏览器的event对象与W3C一样.
    2009-11-11
  • js apply/call/caller/callee/bind使用方法与区别分析

    js apply/call/caller/callee/bind使用方法与区别分析

    js apply/call/caller/callee/bind使用方法与区别分析,需要的朋友可以参考下。
    2009-10-10
  • JavaScript实现QQ聊天室功能

    JavaScript实现QQ聊天室功能

    这篇文章主要为大家详细介绍了JavaScript实现QQ聊天室功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS函数报错Uncaught ReferenceError: XX is not defined问题及解决

    JS函数报错Uncaught ReferenceError: XX is not

    这篇文章主要介绍了JS函数报错Uncaught ReferenceError: XX is not defined问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论