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


Posted in Javascript onJune 19, 2020

下面通过多种方法给大家介绍微信小程序 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)欢迎加入

 微信小程序 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="/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 样式设置为图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
学习jQuey中的return false
Dec 18 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 #Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 #Javascript
深入解读VUE中的异步渲染的实现
Jun 19 #Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 #Javascript
微信小程序收藏功能的实现代码
Jun 19 #Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 #Javascript
微信小程序返回上一级页面的实现代码
Jun 19 #Javascript
You might like
2.PHP入门
2006/10/09 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
PHP7.0版本备注
2015/07/23 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
XENON基于JSON变种
2010/07/27 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
VUE中的无限循环代码解析
2017/09/22 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
python根据出生日期返回年龄的方法
2015/03/26 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
python反转列表的三种方式解析
2019/11/08 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
岗位廉政承诺书
2014/03/27 职场文书
市场营销专业求职信
2014/06/17 职场文书
售房协议书范本2014
2014/10/23 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python