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

目录

一、示例代码

二、核心点

---

一、示例代码

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

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

第一段代码是前端代码

<!--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，即可生效。

 

 

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

来源：CSDN

作者：小屋主人

链接：https://blog.csdn.net/hjdh70/article/details/103567711