一、輸入框

1. 在 wxml 模板文件中

<view class="container">
  <!-- 輸入框 -->
  <view style="display: flex;">
    <view>用戶名：</view>
    <input model:value="{{inputValue}}" />
  </view>
  <view>
    值：{{inputValue}} 
  </view>
</view>

2. 在 js 文件中

Page({
  data: {
    inputValue: "zhangsan", // 輸入框
  }
})

二、多選按鈕

1. 在 wxml 模板文件中

<view class="container">
  <!-- 多選 -->
  <view style="display: flex;">
    <checkbox-group bindchange="checkboxChange">
      <label>選項一
        <checkbox value="1" checked="true" />
      </label>
      <label>選項二
        <checkbox value="2" />
      </label>
    </checkbox-group>
  </view>
  <view>
    值：{{checkValue}}
  </view>
</view>

2. 在 js 文件中

Page({
  data: {
    checkValue: '1', // 多選
  },
  checkboxChange(e) { // 多選
    console.log('多選：', e.detail.value)
    this.setData({
      checkValue: e.detail.value
    })
  }
})

三、單選按鈕

1. 在 wxml 模板文件中

<view class="container">
  <!-- 單選 -->
  <view>
    <radio-group bindchange="radioChange">
      <radio class="radio" value="1" checked="true">男</radio>
      <radio class="radio" value="2">女</radio>
    </radio-group>
  </view>
  <view>
    值：{{radioValue}}
  </view>
</view>

2. 在 js 文件中

Page({
  data: {
    radioValue: '1', // 單選
  },
  radioChange(e) { // 單選
    console.log('單選：', e.detail.value)
    this.setData({
      radioValue: e.detail.value
    })
  }
})

四、開關(guān)選擇器

1. 在 wxml 模板文件中

<view class="container">
  <!-- 開關(guān)選擇器 -->
  <view>
    <switch checked="true" bindchange="switchChange" />
  </view>
  <view>
    值：{{switchValue}}
  </view>
</view>

2. 在 js 文件中

Page({
  data: {
    switchValue: true, // 開關(guān)選擇器
  },
  switchChange(e) { // 開關(guān)選擇器
    console.log('開關(guān)選擇器：', e.detail.value)
    this.setData({
      switchValue: e.detail.value
    })
  },
})

五、下拉|多選|時間|日期|省市聯(lián)動選擇器

通過 mode 屬性的值來設(shè)置彈出層的種類

// mode 值
selector            普通選擇器
multiSelector       多列選擇器
time                時間選擇器
date                日期選擇器
region              省市區(qū)選擇器

1. 在 wxml 模板文件中

<view class="container">
  <!-- 下拉列表 -->
  <view>
    <picker bindchange="pickerChange" value="{{selectValue}}" range="{{list}}" range-key="name">
      <view class="picker">{{list[selectValue].name}}</view>
    </picker>
  </view>
  <view>
    值：{{selectValue}}
  </view>
</view>

2. 在 js 文件中

Page({
  data: {
    list: [{ // 下拉列表
        name: "上",
        value: "1"
      },
      {
        name: "中",
        value: "2"
      },
      {
        name: "下",
        value: "3"
      }
    ],
    selectValue: '1' // 下拉值
  },
  pickerChange(e) { // 下拉選擇器
    console.log('開關(guān)選擇器：', e.detail.value)
    this.setData({
      selectValue: e.detail.value
    })
  },
})