微信小程序 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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 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
MYSQL环境变量设置方法
2007/01/15 PHP
表单复选框向PHP传输数据的代码
2007/11/13 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
vuex实现购物车功能
2020/06/28 Javascript
js实现查询商品案例
2020/07/22 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Python 导入文件过程图解
2019/10/15 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
shell程序中如何注释
2012/02/17 面试题
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
Unix如何添加新的用户
2014/08/20 面试题
求职简历中自我评价
2014/01/28 职场文书
如何写求职信
2014/05/24 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
班主任先进事迹材料
2014/12/17 职场文书
新教师个人总结
2015/02/06 职场文书
团员个人总结
2015/02/26 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android