目录
一、示例代码
今天正好遇到这个问题,顺便就分享一下。
一开始是示例代码,不重要,可以跳过直接看后面。
第一段代码是前端代码
<!--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,即可生效。
写的比较啰嗦,实际实现比较简单。