微信小程序之表单组件之switch(开关选择器)+button(按钮)+checkbox(多项选择器)详解

一.switch

 

switch 即 开关选择器。

 

 

1.属性

 

 

2.代码

 

2.1.WXSS代码

.body-view {
  margin-top: 10px
}

.switch-view {
  margin-left: 5px
}


.class-view {
  margin-top: 30px
}

 

2.2.WXML代码

<view class='class-view'>

  <text>Switch组件_switch样式</text>

  <view class="body-view">
    <switch class='switch-view' checked="{{switch1Checked}}" bindchange="switch1Change" type='switch'/>
  </view>


</view>


<view class='class-view'>

  <text>Switch组件_checkbox样式</text>

  <view class="body-view">
    <switch class='switch-view' checked="{{switch2Checked}}" bindchange="switch2Change" type='checkbox'/>
  </view>


</view>

 

2.3.JS代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    switch1Checked: false,
    switch2Checked: true,
  },

  /**
   * switch样式点击事件
   */
  switch1Change: function (e){
    console.log(`Switch样式点击后是否选中：`, e.detail.value)
  },

  /**
   * checkbox样式点击事件
   */
  switch2Change:function(e){
    console.log(`Checkbox样式点击后是否选中：`, e.detail.value)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

 

 

 

3.效果

 

点击 Switch

 点击checkbox

 

 

 

 

 

二.button 

 

button 即 按钮。

 

1.属性

 

 

2.代码

 

2.1.WXSS代码

button {
  margin: 15px;
}

 

2.2.WXML代码

<button 
type="default" 
size="{{defaultsize}}" 
bindtap="defaultBindtap" 
loading="{{defaultloading}}" 
disabled="{{defaultdisabled}}"> 
普通背景按钮(测试是否可点击)
</button>



<button 
type="primary" 
size="{{primarysize}}" 
bindtap="primaryBindtap" 
loading="{{primaryloading}}" 
disabled="{{primarydisabled}}">
{{primaryname}}
 </button>



<button 
type="warn" 
size="{{warnsize}}" 
bindtap="warnBindtap" 
loading="{{warnloading}}" 
disabled="{{warndisabled}}"> 
红色背景按钮(测试大小)
</button>

 

2.3.JS代码

var pageObject = {
  data: {
    primaryname: '绿色背景按钮(测试是否显示Loading)',
    warnsize: 'default',
    primaryloading: false,
    defaultdisabled: false,
  },


  /**
  * 普通按钮点击事件(测试是否可点击)
  */
  defaultBindtap: function () {
    this.setData({
      defaultdisabled: !this.data.defaultdisabled
    })
  },

  /**
   * 绿色按钮点击事件(测试是否显示Loading)
   */
  primaryBindtap: function () {
    this.setData({
      primaryloading: true,
      primaryname: '数据加载中...'
    })
  },

  /**
   * 红色按钮点击事件(测试大小)
   */
  warnBindtap: function () {
    this.setData({
      warnsize: 'mini'
    })
  },

  
}


Page(pageObject)

 

3. 效果

 

点击三个按钮后

 

 

 

 

 

三.checkbox

 

checkbox-group 即 多项选择器，内部由多个checkbox组成。

 

1.属性

 

checkbox 即 多选项目。

 

2.属性

 

 

3.代码

 

3.1.WXSS代码

.mychecked {
  margin: 15px;
}

.checkbox {
  margin: 15px;
}


.checkboxs {
  margin-top: 10px;
}

 

3.2.WXML代码

<checkbox-group class="mychecked" bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox class='checkboxs' value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
  </label>
</checkbox-group>

 

3.3.JS代码

Page({
  data: {
    items: [{
        name: 'USA',
        value: '美国',
        checked: false
      },
      {
        name: 'CHN',
        value: '中国',
        checked: true
      },
      {
        name: 'BRA',
        value: '巴西',
        checked: false
      },
      {
        name: 'JPN',
        value: '日本',
        checked: false
      },
      {
        name: 'ENG',
        value: '英国',
        checked: false
      },
      {
        name: 'TUR',
        value: '法国',
        checked: false
      },
    ]
  },
  checkboxChange: function(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  }
})

 

 

4.效果