1. 文本输入框(Input):
<form class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">文本输入</label></div>
<div class="weui-cell__bd">
<input class="weui-input" placeholder="请输入内容"/>
</div>
</div>
</form>
2. 选择器(Picker):
<form class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd"><label class="weui-label">选择器</label></div>
<div class="weui-cell__bd">
<picker mode="selector" range="{{array}}" bindchange="pickerChange">
<view class="weui-input">{{array[index]}}</view>
</picker>
</div>
</div>
</form>
在相应的 JS 文件中需要定义 array 数组和 pickerChange 函数。
3. 复选框(Checkbox):
<form class="weui-cells weui-cells_checkbox">
<checkbox-group bindchange="checkboxChange">
<label class="weui-cell weui-check__label" wx:for="{{checkboxItems}}">
<checkbox class="weui-check" value="{{item.value}}"/>
<view class="weui-cell__hd"><label class="weui-label">{{item.name}}</label></view>
</label>
</checkbox-group>
</form>
在相应的 JS 文件中需要定义 checkboxItems 数组和 checkboxChange 函数。
4. 单选框(Radio):
<form class="weui-cells weui-cells_radio">
<radio-group bindchange="radioChange">
<label class="weui-cell weui-check__label" wx:for="{{radioItems}}">
<radio class="weui-check" value="{{item.value}}"/>
<view class="weui-cell__hd"><label class="weui-label">{{item.name}}</label></view>
</label>
</radio-group>
</form>
在相应的 JS 文件中需要定义 radioItems 数组和 radioChange 函数。
5. 开关(Switch):
<form class="weui-cells weui-cells_switch">
<switch checked="{{switchChecked}}" bindchange="switchChange"/>
</form>
在相应的 JS 文件中需要定义 switchChecked 变量和 switchChange 函数。
这些是 WeUI 的一些表单组件的简单用法。使用这些组件可以方便地构建用户输入和选择的交互界面。在实际开发中,你可以根据项目需求组合使用这些组件,或者根据 WeUI 文档查阅更多组件的用法和样式定制方式。
转载请注明出处:http://www.zyzy.cn/article/detail/1325/微信小程序