WeUI 提供了一系列表单组件,用于在小程序中创建用户输入和交互的表单。以下是一些常用的 WeUI 表单组件及其简单用法:

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/微信小程序