365体育备用网址报道21.3.3表单组件_365体育备用网址官网资讯

button按钮的属性如表21-13所示。

表21-13button按钮属性说明
button按钮示例代码如下所示。

XML"><button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>

checkbox-group多项选择器,内部由多个checkbox组成。checkbox多选项目属性如表21-14所示。

表21-14 app成员函数属性说明
checkbox多选项目示例代码如下所示。

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</checkbox-group>

Form表单用于将组件内的用户输入的 提交。当点击 表单中 formType 为 submit 的

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch"/>
  </view>
  <view class="section section_gap">
    <view class="section__title">slider</view>
    <slider name="slider" show-value ></slider>
  </view>

  <view class="section">
    <view class="section__title">input</view>
    <input name="input" placeholder="please input here" />
  </view>
  <view class="section section_gap">
    <view class="section__title">radio</view>
    <radio-group name="radio-group">
      <label><radio value="radio1"/>radio1</label>
      <label><radio value="radio2"/>radio2</label>
    </radio-group>
  </view>
  <view class="section section_gap">
    <view class="section__title">checkbox</view>
    <checkbox-group name="checkbox">
      <label><checkbox value="checkbox1"/>checkbox1</label>
      <label><checkbox value="checkbox2"/>checkbox2</label>
    </checkbox-group>
  </view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>

input输入框的属性如表21-16所示。

表21-16input输入框属性说明
input输入框示例代码如下所示。

<!--input.wxml-->
<view class="section">
  <input placeholder="这是一个能够主动聚焦的input" auto-focus/>
</view>
<view class="section">
  <input placeholder="这个只有在按钮点击的时刻才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得输入框猎取焦点</button>
  </view>
</view>
<view class="section">
  <input  maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section">
  <view class="section__title">你输入的是:{{inputValue}}</view>
  <input  bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
<view class="section">
  <input  bindinput="bindReplaceInput" placeholder="陆续的两个1会变成2" />
</view>
<view class="section">
  <input  bindinput="bindHideKeyboard" placeholder="输入123主动收起键盘" />
</view>
<view class="section">
  <input password type="number" />
</view>
<view class="section">
  <input password type="text" />
</view>
<view class="section">
  <input type="digit" placeholder="带小数点的数字键盘"/>
</view>
<view class="section">
  <input type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section">
  <input placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>

label用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。for优先级高于内部控件,内部有多个控件的时刻默认触发第一个控件。
label示例代码如下所示。

<view class="section section_gap">
<view class="section__title">表单组件在label内</view>
<checkbox-group class="group" bindchange="checkboxChange">
  <view class="label-1" wx:for="{{checkboxItems}}">
    <label>
      <checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>
      <view class="label-1__icon">
        <view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
      </view>
      <text class="label-1__text">{{item.value}}</text>
    </label>
  </view>
</checkbox-group>
</view>

<view class="section section_gap">
<view class="section__title">label用for标识表单组件</view>
<radio-group class="group" bindchange="radioChange">
  <view class="label-2" wx:for="{{radioItems}}">
    <radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio>
    <view class="label-2__icon">
      <view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
    </view>
    <label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label>
  </view>
</radio-group>
</view>

picker滚动选择器撑腰三种选择器,通过mode来区分,分别是一般选择器,时间选择器,日期选择器,默认是一般选择器。
一般选择器(mode = selector)的属性如表21-17所示。

表21-17一般选择器属性说明
时间选择器(mode = time)的属性如表21-18所示。

表21-18 时间选择器属性说明
日期选择器(mode = date)的属性如表21-19所示。

表21-19日期选择器属性说明
picker滚动选择器示例代码如下所示。

<view class="section">
  <view class="section__title">地区选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择:{{array[index]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      当前选择: {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>

radio-group单项选择器,内部由多个 组成。radio单选项目的属性如表21-20所示。

表21-20radio单选项目属性说明
radio单选项目示例代码如下所示。

<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</radio-group>

slider滑动选择器属性如表21-21所示。

表21-21slider滑动选择器属性说明
slider滑动选择器示例代码如下所示。

<view class="section section_gap">
  <text class="section__title">设置left/right icon</text>
  <view class="body-view">
    <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/>
  </view>
</view>

<view class="section section_gap">
  <text class="section__title">设置step</text>
  <view class="body-view">
    <slider bindchange="slider2change" step="5"/>
  </view>
</view>

<view class="section section_gap">
  <text class="section__title">显示当前value</text>
  <view class="body-view">
    <slider bindchange="slider3change" show-value/>
  </view>
</view>

<view class="section section_gap">
  <text class="section__title">设置最小/最大值</text>
  <view class="body-view">
    <slider bindchange="slider4change" min="50" max="200" show-value/>
  </view>
</view>

switch开关选择器的属性如表21-22所示。

表21-22switch开关选择器属性说明
switch开关选择器示例代码如下所示。

<view class="body-view">
    <switch checked bindchange="switch1Change"/>
    <switch bindchange="switch2Change"/>
</view>

textarea多行输入框的属性如表21-23所示。

表21-23textarea多行输入框属性说明
textarea多行输入框示例代码如下所示。

<!--textarea.wxml-->
<view class="section">
  <textarea bindblur="bindTextAreaBlur" auto-height placeholder="主动变高" />
</view>
<view class="section">
  <textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;"  />
</view>
<view class="section">
  <textarea placeholder="这是一个能够主动聚焦的textarea" auto-focus />
</view>
<view class="section">
  <textarea placeholder="这个只有在按钮点击的时刻才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得输入框猎取焦点</button>
  </view>
</view>

------分隔线----------------------------

公布评论 (150人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换海立方 娱乐场
最新评论