微信小程序 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 相关文章推荐
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
微信小程序 开发之全局配置
May 05 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
vue视图不更新情况详解
May 16 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
关于Javascript闭包与应用的详解
Apr 22 Javascript
使用javascript解析二维码的三种方式
Nov 11 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
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
Python 创建子进程模块subprocess详解
2015/04/08 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python实现控制台输入密码的方法
2015/05/29 Python
TensorFlow的权值更新方法
2018/06/14 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
python tkinter控件布局项目实例
2019/11/04 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
广告学专业自荐信范文
2014/02/24 职场文书
新年晚会主持词
2014/03/24 职场文书
导航工程专业自荐信
2014/09/02 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
小学科学教学计划
2015/01/21 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
小学教育见习总结
2015/06/23 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js