小程序小程序点击加载样式怎么弄

　　关于小程序点击加载样式，小编在之前的文章中好像已经做过相关介绍，但是很多朋友还不太了解，所以接下来小编再次讲解一下小程序点击加载样式实现步骤。

　　第一步，把要改变小程序样式添加到相应js文件的全局变量中，如： data : { color : '#000' }

　　第二步，将变量绑定到view中,

　　第三步，在view中添加事件，如： bindtap="changeColor"

　　第四步，在相应js文件中添加该自定义方法：, changeColor: function(e){ this.setData({ color : '#fff' });}

　　小程序的button改变与其type属*有关，其默认的三个属*是：default’, ‘primary’, ‘warn’，其中default’是灰色的属*，而primary是蓝色，warn是红色，他们这个颜色是不能改变的。

　　   button1

　　   button2

　　   button3

　　   button4

　　可以看到这三种属*的button的class名都为Btn，

　　当给Btn设置background-color时，发现只有无type的背景颜色变了，(这个其实挺坑的,一个月前当时是default属*才能改变颜色,这才多久就改了,小程序还在成长,技术不能写死,说不定哪次就改动了)

　　   .Btn{margin-top:10px;background-color:yellow;}

　　            button1

　　            button2

　　            button3

　　在wxss中设置button-hover为改变其点击态的样式，点击态样式目前我只发现在无type属*时才能生效：

　　   点击

　　   .btn-hover ：{background-color: pink;}

　　而other-button-hover是比button-hover优先级高的，比如同时设置background-color，会出现.other-button-hover设置的效果，当然这也是在无type属*时生效，

　　   点击

　　   .button-hover{background: black;}

　　此时点击态样式为黑色

　　   点击

　　   .button-hover{background: black;}

　　   .btn-hover{background-color: blue;}

　　此时点击态样式为蓝色

　　注意：.button-hover是默认的，不用再wxml中添加class，而。other-button-hover需要在wxml中添加class名hover-class，这是他们点击态的样式，

　　小程序点击加载样式怎么实现，看完以上资料以后大家明白了吗?对照上述过程，是不是感觉操作起来还比较简单?更多相关资料请关注微信小程序素材网。

　　小程序点击效果样式更换教程

　　小程序按钮点击样式功能介绍

　　小程序点击切换样式怎么操作