表单组件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);
}
}