微信小程序 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 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
JS验证码实现代码
Sep 14 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 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
用PHP读取IMAP邮件
2006/10/09 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
node.js中watch机制详解
2014/11/17 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
Python random模块常用方法
2014/11/03 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
python实现扫描日志关键字的示例
2018/04/28 Python
python搜索包的路径的实现方法
2019/07/19 Python
Pytorch之contiguous的用法
2019/12/31 Python
python实现扫雷游戏
2020/03/03 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
毕业生面试求职信
2014/06/23 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
呐喊读书笔记
2015/06/30 职场文书
python中取整数的几种方法
2021/11/07 Python