一、输入框
- 在 wxml 模板文件中
<view class="container">
<!-- 输入框 -->
<view style="display: flex;">
<view>用户名：</view>
<input model:value="{{inputValue}}" />
</view>
<view>
值：{{inputValue}}
</view>
</view>
- 在 js 文件中
Page({
data: {
inputValue: "zhangsan", // 输入框
}
})
二、多选按钮
- 在 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>
- 在 js 文件中
Page({
data: {
checkValue: '1', // 多选
},
checkboxChange(e) { // 多选
console.log('多选：', e.detail.value)
this.setData({
checkValue: e.detail.value
})
}
})
三、单选按钮
- 在 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>
- 在 js 文件中
Page({
data: {
radioValue: '1', // 单选
},
radioChange(e) { // 单选
console.log('单选：', e.detail.value)
this.setData({
radioValue: e.detail.value
})
}
})
四、开关选择器
- 在 wxml 模板文件中
<view class="container">
<!-- 开关选择器 -->
<view>
<switch checked="true" bindchange="switchChange" />
</view>
<view>
值：{{switchValue}}
</view>
</view>
- 在 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 省市区选择器
- 在 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>
- 在 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
})
},
})
