微信小程序 Button 组件详解及简单实例
投稿:lqh
这篇文章主要介绍了微信小程序 Button 组件详解及简单实例的相关资料,需要的朋友可以参考下
注:button-hover默认为{background-color:rgba(0,0,0,0.1);opacity:0.7;} 示例代码: /** wxss **/ /** 修改button默认的点击态样式类**/ .button-hover{ background-color:red; /** 添加自定义button点击态样式类**/ .other-button-hover{ background-color:blur; button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default" hover- default /button button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="primary" primary /button button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="warn" warn /button button bindtap="setDisabled" 点击设置以上按钮disabled属性 /button button bindtap="setPlain" 点击设置以上按钮plain属性 /button button bindtap="setLoading" 点击设置以上按钮loading属性 /button 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 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) 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! (责任编辑:admin) |