首页 > 代码库 > 微信小程序组件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);
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 =http://www.mamicode.com/ {}      changedData[key] =        this.data[key] === ‘default‘ ? ‘mini‘ : ‘default‘;      this.setData(changedData);    }}
View Code

 

微信小程序组件button