表单组件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 = {} changedData[key] = this.data[key] === ‘default‘ ? ‘mini‘ : ‘default‘; this.setData(changedData); } })(types[i]) } Page(pageObject);
JS
<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>
WXML
button{ margin-top: 10px; padding-left: 10px; padding-right: 10px; font-family:Verdana, Geneva, Tahoma, sans-serif; } .other-button-hover { background-color: blur; }
WXSS
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 = {} changedData[key] = this.data[key] === ‘default‘ ? ‘mini‘ : ‘default‘; this.setData(changedData); } }
时间: 2024-11-05 22:45:12