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

发布时间:2025-04-12 10:54

科技改变健康教育方式,线上课程丰富多样 #生活知识# #生活感悟# #科技生活变迁# #健康科技#

最新推荐文章于 2025-01-21 22:05:22 发布

qq_40536470 于 2018-08-01 16:49:40 发布

小程序的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,这是他们点击态的样式,

网址:小程序的button样式改变及点击态样式 https://www.yuejiaxmz.com/news/view/861387

相关内容

[解读小程序]生活工具集合
vue中css样式管理
button怎么记,button的词根词缀巧记速记方法
小程序各种功能代码片段整理
微信小程序todolist
如何顺着这个代码在style.css找到它的样式,将“send”按钮设计悬停样式,鼠标悬停在按钮上时,按钮颜色变化为绿色
智慧养老小程序制作开发
微信小程序 iOS type=“nickname”无效
CSS小技巧——去除input[type=number]的默认样式
小程序电商实战:打造高效转化的购物平台

随便看看