首页 > 代码库 > 微信小程序组件button
微信小程序组件button
表单组件button:官方文档
Demo Code:
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 }) }};//动态的往pageObject添加default、primary、warn函数属性//方法体为切换当前key的尺寸大小for (var i = 0; i < types.length; ++i) { (function(type) { pageObject[type] = function(e) { var key = type + ‘Size‘ var changedData =http://www.mamicode.com/ {} changedData[key] = this.data[key] === ‘default‘ ? ‘mini‘ : ‘default‘; this.setData(changedData); } })(types[i])}Page(pageObject);
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default" hover-class="other-button-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>
button{ margin-top: 10px; padding-left: 10px; padding-right: 10px; font-family:Verdana, Geneva, Tahoma, sans-serif;}.other-button-hover { background-color: blur;}
Tip:
js代码中for循环可以改成容易理解的书写方式,但要注意for循环体中定义变量的作用域问题。var&let
for (var i = 0; i < types.length; ++i) { let type=types[i]; pageObject[type] = function(e) { var key = type + ‘Size‘ var changedData =http://www.mamicode.com/ {} changedData[key] = this.data[key] === ‘default‘ ? ‘mini‘ : ‘default‘; this.setData(changedData); }}
微信小程序组件button
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。