微信小程序----button組件

DEMO下載

展示效果圖

button組件的常用屬性

1. size：default、mini—-default為塊級按鈕、mini為小按鈕
2. type：primary、default、warn—-primary提交成功、default默認灰色、warn警告色
3. plain：true、false—-按鈕是否鏤空，背景色透明
4. disabled：true、false—-是否禁用
5. loading：true、false—-名稱前是否帶 loading 圖標

WXML

<view class="tui-btn-group"> <view class="tui-btn-content"> <button size="{{defaultSize}}" bindtap="default" hover-class="other-button-hover"> default </button> </view> <view class="tui-btn-content"> <button type="primary" size="{{primarySize}}" bindtap="primary"> primary </button> </view> <view class="tui-btn-content"> <button type="warn" size="{{warnSize}}" bindtap="warn"> warn </button> </view> <view class="tui-btn-content"> <button bindtap="setDisabled" disabled="{{disabled}}" type="primary">點擊設置按鈕disabled屬性true</button> </view> <view class="tui-btn-content"> <button bindtap="setPlain" plain="{{plain}}">點擊設置按鈕plain屬性</button> </view> <view class="tui-btn-content"> <button bindtap="setLoading" loading="{{loading}}" type="warn">點擊設置按鈕loading屬性</button> </view> </view>

WXSS

.tui-btn-group{ padding: 10px; }
.tui-btn-content{ height: 60px; line-height: 60px; }
/** 修改button默認的點擊態樣式類**/
.button-hover { background-color: red; }
/** 添加自定義button點擊態樣式類**/
.other-button-hover { background-color: blue; }

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

//循環給'default', 'primary', 'warn'按鈕創建函數
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);

其他

我的博客，歡迎交流！

我的CSDN博客，歡迎交流！

微信小程序專欄

前端筆記專欄

微信小程序實現部分高德地圖功能的DEMO下載

微信小程序實現MUI的部分效果的DEMO下載

微信小程序實現MUI的GIT項目地址

微信小程序實例列表

前端筆記列表

游戲列表