一、示例代码

今天正好遇到这个问题，顺便就分享一下。

一开始是示例代码，不重要，可以跳过直接看后面。

第一段代码是前端代码

<!--index.wxml--><button class="tapbtn1" plain="true" bindtap="skyOnclick"><image class="tapimg1" src='/images/icon1.png'></image>
</button>

第二段代码是CSS样式

/**index.wxss**/.tapimg1{  width: 150rpx;height: 150rpx;
}.tapbtn1[plain]{padding: 0;border:none;   width: 150rpx;height: 150rpx;
}

第一个tapimg1是图片的类，第二个tapbtn1是按钮的类。

上面的是我写的参考代码（随便写的，随便命名的，别喷），下面是核心。

二、核心点

实现图片按钮的核心点如下：

1、隐藏按钮的显示

实现方法：在你需要设置的button的属性中将其设为=》 plain="true" ，即可实现。

2、隐藏按钮的边框

实现方法：在你需要设置的button的CSS样式中将指定的属性设为=》 border:none，既可生效。

切记一定要在类名旁边加上[plain]，例如：tapbtn1[plain]，不加上的话，边框可能不会消失。

3、预防出现图片和按钮无法对齐的现象

实现方法：在你需要设置的button的CSS样式中将指定的属性设为=》padding:0，即可生效。

写的比较啰嗦，实际实现比较简单。

【图片按钮】在微信小程序中实现图片按钮相关推荐

微信小程序中的图片处理
微信小程序中的图片处理微信小程序中的<image></image>用于向页面中插入图片.有两个重要的属性 1.src 要插入图片的资源地址 2.mode 图片裁剪.缩放 ...
微信小程序中进行图片压缩
微信小程序中进行图片压缩问题: 一般情况下,小程序在进行拍照识别的时候,上传图片的大小会使小程序出现冗余,这个时候,为了减少小程序的冗余并且使上传的图片可以分辨出该图片中的内容是那些内容,我们就需 ...
微信小程序中裁剪图片以及压缩到指定尺寸并上传
本文分为两个内容,分别是裁剪图片和压缩引出问题 1.为何要裁剪图片因为需要上传头像,但是每个型号的手机拍出来的照片尺寸都不太一样,不能统一,所以,希望在上传之前进行自主裁剪,保证上传到服务器上的尺 ...
mfc cimage加载显示图片_在微信小程序里实现图片预加载组件
网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
微信小程相对图片路径_微信小程序----相对路径图片不显示
出现场景在本地调试的时候本地图片显示,但是手机浏览的时候本地图片不显示. 出现图片不显示的原因小程序只支持网络路径和base64的图片.图片转base64在线工具处理方法将图片都放到服务器,然 ...
微信小程序中，图片的位置设置
在编写小程序的时候,难免会涉及到图片的位置放置. 以及具体的wxss格式的设置,在这里想进行一个具体格式的讲解. 第一种:图片不换行,多个图片排列在同一行具体样例如下图:黄色荧光笔所绘: 要实现该操 ...
微信小程序中好看的按钮样式（渐变色）、view的点击变色效果、按钮漂亮的圆角边框、解决hover设置失效
好看1: .wxss /* 从上往下渐变 */ .bt_1{margin-top: 40rpx;background: linear-gradient(#ccfbff, #ef96c5); } 好看2 ...
微信小程序中base64图片的显示与保存
当我们拿到如下base64格式的数据时: 显示使用image标签,src属性添加data:image/png;base64, (注意:若imgData返回数据中含有data:image/png;ba ...
为什么微信小程序里的图片在电脑上显示在手机上不显示？
<image class='carousel' src="/images/图片301@2x.png"></image> 电脑上显示图片,但手机上是空白的 & ...

【图片按钮】在微信小程序中实现图片按钮

一、示例代码

二、核心点

【图片按钮】在微信小程序中实现图片按钮相关推荐

最新文章

热门文章