小程序的button样式改变及点击态样式

ⅰ亾dé卋堺 提交于 2019-12-06 04:28:55

此博客已整体转至http://yayar.top/2017/05/18/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84button%E6%A0%B7%E5%BC%8F%E6%94%B9%E5%8F%98%E5%8F%8A%E7%82%B9%E5%87%BB%E6%80%81%E6%A0%B7%E5%BC%8F/#more
小程序的button改变与其type属性有关,其默认的三个属性是:default’, ‘primary’, ‘warn’,其中default’是灰色的属性,而primary是蓝色,warn是红色,他们这个颜色是不能改变的。
   <button type="default" class="btn">button1</button>
   <button type="warn" class="btn">button2</button>
   <button type="primary" class="btn">button3</button>
   <button class="btn">button4</button>
可以看到这三种属性的button的class名都为Btn,
当给Btn设置background-color时,发现只有无type的背景颜色变了,(这个其实挺坑的,一个月前当时是default属性才能改变颜色,这才多久就改了,小程序还在成长,技术不能写死,说不定哪次就改动了)
   .Btn{margin-top:10px;background-color:yellow;}

            button1

            button2

            button3

在wxss中设置button-hover为改变其点击态的样式,点击态样式目前我只发现在无type属性时才能生效:
   <button class="btn" hover-class="btn-hover" >点击</button>
   .btn-hover :{background-color: pink;}
而other-button-hover是比button-hover优先级高的,比如同时设置background-color,会出现.other-button-hover设置的效果,当然这也是在无type属性时生效,
   <button class="btn">点击</button>
   .button-hover{background: black;}
此时点击态样式为黑色
   <button class="btn" hover-class="btn-hover">点击</button>
   .button-hover{background: black;}
   .btn-hover{background-color: blue;}
此时点击态样式为蓝色
注意:.button-hover是默认的,不用再wxml中添加class,而。other-button-hover需要在wxml中添加class名hover-class,这是他们点击态的样式,

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!