1. Input 输入框组件:
用于接收用户输入的文本。
<input placeholder="请输入内容" bindinput="onInput" />
Page({
onInput: function (event) {
console.log('Input value:', event.detail.value);
}
})
2. Textarea 多行输入框组件:
类似 input，但是支持多行文本输入。
<textarea placeholder="请输入内容" bindinput="onTextareaInput"></textarea>
Page({
onTextareaInput: function (event) {
console.log('Textarea value:', event.detail.value);
}
})
3. Switch 开关组件:
用于表示开关状态，用户可以切换。
<switch checked="{{switchValue}}" bindchange="onSwitchChange"></switch>
Page({
data: {
switchValue: false
},
onSwitchChange: function (event) {
console.log('Switch value:', event.detail.value);
this.setData({
switchValue: event.detail.value
});
}
})
4. Checkbox 复选框组件:
用于选择多个选项。
<checkbox-group bindchange="onCheckboxChange">
<checkbox value="option1">选项1</checkbox>
<checkbox value="option2">选项2</checkbox>
</checkbox-group>
Page({
onCheckboxChange: function (event) {
console.log('Checkbox values:', event.detail.value);
}
})
5. Radio 单选框组件:
用于选择单个选项。
<radio-group bindchange="onRadioChange">
<radio value="option1">选项1</radio>
<radio value="option2">选项2</radio>
</radio-group>
Page({
onRadioChange: function (event) {
console.log('Radio value:', event.detail.value);
}
})
6. Picker 选择器组件:
用于从预设的数据中选择一个或多个值。
<picker mode="selector" range="{{selectorArray}}" bindchange="onPickerChange">
<view>{{selectorArray[selectorIndex]}}</view>
</picker>
Page({
data: {
selectorArray: ['选项1', '选项2', '选项3'],
selectorIndex: 0
},
onPickerChange: function (event) {
console.log('Picker value:', event.detail.value);
this.setData({
selectorIndex: event.detail.value
});
}
})
以上是一些微信小程序中常见的表单组件及其基本用法。这些组件可以帮助开发者构建用户交互界面，实现用户输入和选择的功能。
转载请注明出处：http://www.zyzy.cn/article/detail/800/微信小程序