这篇文章主要介绍微信小程序button组件怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联是一家集网站建设,建平企业网站建设,建平品牌网站建设,网站定制,建平网站建设报价,网络营销,网络优化,建平网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
这篇文章主要为大家详细介绍了微信小程序button组件的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文为大家分享了微信小程序button组件的使用方法,供大家参考,具体内容如下
展示效果图
button组件的常用属性
size:default、mini—-default为块级按钮、mini为小按钮
type:primary、default、warn—-primary提交成功、default默认灰色、warn警告色
plain:true、false—-按钮是否镂空,背景色透明
disabled:true、false—-是否禁用
loading:true、false—-名称前是否带 loading 图标
WXML
WXSS
.tui-btn-group{ padding: 10px; } .tui-btn-content{ height: 60px; line-height: 60px; } /** 修改button默认的点击态样式类**/ .button-hover { background-color: red; } /** 添加自定义button点击态样式类**/ .other-button-hover { background-color: blue; }
JS
var types = ['default', 'primary', 'warn'] var pageObject = { data: { defaultSize: 'default', primarySize: 'default', warnSize: 'default', disabled: false, plain: false, loading: false }, setDisabled: function (e) { this.setData({ disabled: !this.data.disabled }) }, setPlain: function (e) { this.setData({ plain: !this.data.plain }) }, setLoading: function (e) { this.setData({ loading: !this.data.loading }) } } //循环给'default', 'primary', 'warn'按钮创建函数 for (var i = 0; i < types.length; ++i) { (function (type) { pageObject[type] = function (e) { var key = type + 'Size' var changedData = {} changedData[key] = this.data[key] === 'default' ? 'mini' : 'default' this.setData(changedData) } })(types[i]) } Page(pageObject);
以上是“微信小程序button组件怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
当前名称:微信小程序button组件怎么用
网页网址:http://scpingwu.com/article/gshipj.html