微信小程序常用模块(form+switch+slider+checkbox+radio+textarea+picker等)

1、页面区域

// wxml区域
<view class="container">
  <form bindsubmit="output">
    <view class="title">
      Form表单
    </view>
    <view id="sitchArea">
      <view class="mySwitch">
        <text>siwthch组件1</text>
        <switch type="switch" name="Swithch1"></switch>
      </view>
      <view class="mySwitch">
        <text>siwthch组件2</text>
        <switch type="checkbox" name="Swithch2"></switch>
      </view>
    </view>
    <view id="sliderArea">
      <text>slider滑动选择器</text>
      <slider show-value="true" step="10" min="10" max="50" color="black" selected-color="red"></slider>
    </view>
    <view id="checkboxArea">
      <text>checkbox多项选择器</text>
      <checkbox-group name="checkbox">
        <checkbox value="checkbox1">checkbox1</checkbox>
        <checkbox value="checkbox2">checkbox2</checkbox>
        <checkbox value="checkbox3">checkbox3</checkbox>
        <checkbox value="checkbox4">checkbox4</checkbox>
      </checkbox-group>
    </view>
    <view id="radioArea">
      <radio-group name="radio">
        <text>radio单选项</text>
        <radio value="radio1">radio1</radio>
        <radio value="radio2">radio2</radio>
      </radio-group>
    </view>
    <view id="inputArea">
      <text>input单行输入框：</text>
      <input name="input" password="true" placeholder="密码" style="border: 1px solid black"></input>
    </view>
    <view id="textareaArea">
      <view>textarea多行输入框：</view>
      <textarea name="textarea" auto-focus="true" auto-height="true" placeholder="自动变高" style="border:1px solid black"></textarea>
    </view>
    <view class="pickerArea">
      <picker range="{{array}}" mode="selector" value="{{index}}" bindchange="pickerbind">
        <view>国籍为：{{array[index]}}</view>
      </picker>
    </view>
    <view class="pickerArea">
      <picker name="address" mode="region" value="{{region}}" custom-item="{{customItem}}" bindchange="regionchange">
        <view>地址为：{{region[0]}}，{{region[1]}},{{region[2]}}</view>
      </picker>
    </view>
    <view class="pickerArea">
      <picker mode="date" name="date" value="{{date}}" start="1930-01-21" bindchange="datechange" fields="day">
        <view>出生日期为：{{date}}</view>
      </picker>
    </view>
    <view class="pickerArea">
      <picker mode="time" name="time" value="{{time}}" start="00:00" end="23:59" bindchange="timechange">
        <view>时间:{{time}}</view>
      </picker>
    </view>
    <view class="pickerArea">
      <picker mode="multiSelector" range="{{multiArray}}" bindchange="multichange" value="{{multiIndex}}" bindcolumnchange="multicolumnchange">
        <view>学校与专业：{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}</view>
      </picker>
    </view>
    <button form-type="submit">submit</button>
    <button form-type="reset">reset</button>
  </form>
</view>

2、js区域

// js区域
// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    array:['中国','日本','美国','英国'],
    index:0,
    region:['广东省','深圳市','龙岗区'],
    customItem:'全部',
    date:'2020-01-01',
    time:'12:00',
    multiArray:[
      ['试试水大学','北京大学'],
      ['计算机学院','软件学院'],
      ['计算机学院','网络','云计算']
    ],
    multiIndex:[0,0,0],
    componentsInfoArray:[]
  },
  output(e){
    console.log("submit数据为",e.detail.value)
  },
  regionchange(e){
      this.setData({
        region:e.detail.value
      })
      this.data.componentsInfoArray.push(e)
  },
  multichange(e){
      console.log(e)
      this.setData({
        multiIndex:e.detail.value
      })
    },
    multicolumnchange(e){
      let MultiData={
        multiArray : this.data.multiArray,
        multiIndex : this.data.multiIndex
      }
      MultiData.multiIndex[e.detail.column] = e.detail.value
        switch (e.detail.column){
        case 0:
          switch (MultiData.multiIndex[0]){
            case 0:
              MultiData.multiArray[1] = ['计算机学院', '软件学院', '双刀的学院'];
              MultiData.multiArray[2] = ['计算机啊啊啊技术','网络技术','云计算'];
              break;
            case 1:
              MultiData.multiArray[1] = ['建筑与工程学院','经济学院','人工智能学院'];
              MultiData.multiArray[2] = ['房地产经济与管理','建筑工程设别技术'];
              break;
          }
          MultiData.multiIndex[1] = 0;
          MultiData.multiIndex[2] = 0;
          break;
        case 1:
          // 第二列变化
          switch (MultiData.multiIndex[0]){
            case 0:
              switch(MultiData.multiIndex[1]){
                case 0:
                  MultiData.multiArray[2] = ['计算机111111', '网络技术2222', '云计算3333'];
                  break;
                case 1:
                  MultiData.multiArray[2] = ['软件工程'];
                  break; 
                case 2:
                  MultiData.multiArray[2] = ['外语'];
                  break; 
                case 3:
                  MultiData.multiArray[2] = ['外语22222233'];
                  break; 
                case 4:
                  MultiData.multiArray[2] = ['智能制造'];
                  break; 
              }
              break;
            case 1:
              switch (MultiData.multiIndex[1]) {
                case 0:
                  MultiData.multiArray[2] = ['房地产哈哈哈哈哈', '建筑工程啊啊啊', '云计算是是是'];
                  break;
                case 1:
                  MultiData.multiArray[2] = ['经济'];
                  break;
                case 2:
                  MultiData.multiArray[2] = ['外语'];
                  break;
              }
              break;
          }
          MultiData.multiIndex[2] = 0;
          break;
          }
        this.setData(MultiData) 
      },

  pickerbind(e){
      this.setData({
        index:e.detail.value
      })
  },
  datechange(e){
      this.setData({
        date:e.detail.value
      })
  },
  timechange(e){
    this.setData({
      time:e.detail.value
    })
  }
})

演示效果

（学校和专业的picker区域做了自动匹配）