微信小程序----组件之button

效果图

项目结构：

index.wxml

<view class="">  <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 open-type="contact">进入客服会话</button></view>

index.wxss

/** wxss **//** 修改button默认的点击态样式类**/.button-hover {  background-color: red;}/** 添加自定义button点击态样式类**/.other-button-hover {  background-color: blue;}

index.js

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);

源码下载：http://download.csdn.net/download/zhaihaohao1/9968483