一、输入框

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

四、开关选择器

1. 在 wxml 模板文件中

<view class="container">
  <!-- 开关选择器 -->
  <view>
    <switch checked="true" bindchange="switchChange" />
  </view>
  <view>
    值：{{switchValue}}
  </view>
</view>

2. 在 js 文件中

Page({
  data: {
    switchValue: true, // 开关选择器
  },
  switchChange(e) { // 开关选择器
    console.log('开关选择器：', e.detail.value)
    this.setData({
      switchValue: e.detail.value
    })
  },
})

五、下拉|多选|时间|日期|省市联动选择器

通过 mode 属性的值来设置弹出层的种类

// mode 值
selector            普通选择器
multiSelector       多列选择器
time                时间选择器
date                日期选择器
region              省市区选择器

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('开关选择器：', e.detail.value)
    this.setData({
      selectValue: e.detail.value
    })
  },
})