微信本身为 button 组件提供了三种 type 属性:
分别会使按钮为灰色,绿色,红色,如下图:
那么问题来了:
我想使用其他颜色的按钮怎么办?
我正在看的这本教程给出这样的方法:
在 wxss 中,在某个 class 中指定 button 平时的 background-color 属性,然后在 hover-class 中指定 button 按下时候的 background-color 属性。在 wxml 中,为对应的组件指定hover-class 属性。
- wxss 中的代码
.btnGroup button{
width:160rpx;
margin: 10rpx;
line-height: 150rpx;
text-align: center;
border-radius: 5px;
text-shadow: 0,1px,1px,rgba(0, 0, 0, 0.3);
background-color: #f78d1d;
color:#000;
border:solid,1px,#da7c0c;
font-size: larger;
}
.button-hover
{
background-color: #da7c0c; /*this won't work?*/
}
- wxml 中的代码
<button hover-class='button-hover'>1</button>
你们也看到我的注释了。当你按照这个方法做了以后,你就会惊喜地发现,并没有什么卵用。我跟你讲,我就这个表情:
关键时刻还是得自己动手,我鼓捣了好长时间终于找到了正确的方法(骄傲)。
怎么做呢,咱们来参考一下微信提供的三种按钮是怎么实现点击变色的:
咱们来依样画葫芦:
然后 wxml 中的组件也指定 type 属性为自定义的 myType:
编译一下,发现终于实现了点击变色!
另:我在网上查找解决办法时也得到了其他启发,虽然没有找到实现点击变色的方法,但是了解到按钮的视觉反馈还有其他种类,比如说缩放,位移等。附脚本之家的一篇文章:
https://www.jb51.net/article/156958.htm
里面的图片转载不过来,应该是网站限制。