首页 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践全文在线阅读

《微信公众平台开发:从零基础到ThinkPHP5高性能框架实践》21.3.3 表单组件

关灯直达底部

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

表21-13 button属性说明

button的示例代码如下。


<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 checkbox属性说明

checkbox的示例代码如下。


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

form(表单)用于将组件内的用户输入的<switch/><input/><checkbox/><slider/><radio/><picker/>提交。当点击<form/>中formType为submit的<button/>组件时,会将表单组件中的value值提交,需要在表单组件中加上name作为key。from的属性如表21-15所示。

表21-15 from属性说明

from的示例代码如下。


<form bindsubmit="formSubmit" bindreset="formReset">    <view>        <view>switch</view>        <switch name="switch"/>    </view>    <view>        <view>slider</view>        <slider name="slider" show-value ></slider>    </view>    <view>        <view>input</view>        <input name="input" placeholder="please input here" />    </view>    <view>        <view>radio</view>        <radio-group name="radio-group">            <label><radio />radio1</label>            <label><radio />radio2</label>        </radio-group>    </view>    <view>        <view>checkbox</view>        <checkbox-group name="checkbox">            <label><checkbox />checkbox1</label>            <label><checkbox />checkbox2</label>        </checkbox-group>    </view>    <view>        <button formType="submit">Submit</button>        <button formType="reset">Reset</button>    </view></form>  

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

表21-16 input属性说明

input的示例代码如下。


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

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

label的示例代码如下。


<view><view>表单组件在label内</view><checkbox-group bindchange="checkboxChange">    <view wx:for="{{checkboxItems}}">        <label>            <checkbox hidden  checked="{{item.checked}}"></checkbox>            <view>                <view ></view>            </view>            <text>{{item.value}}</text>        </label>    </view></checkbox-group></view><view><view>label用for标识表单组件</view><radio-group bindchange="radioChange">    <view wx:for="{{radioItems}}">        <radio hidden  checked="{{item.checked}}"></         radio>        <view>            <view ></view>        </view>        <label for="{{item.name}}"><text>{{item.name}}</text></        label>    </view></radio-group></view> 

picker(滚动选择器)支持3种选择器,通过mode来区分,分别是普通选择器、时间选择器、日期选择器,默认是普通选择器。

普通选择器(mode=selector)的属性如表21-17所示。

表21-17 普通选择器属性说明

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

表21-18 时间选择器属性说明

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

表21-19 日期选择器属性说明

picker的示例代码如下。


<view>    <view>普通选择器</view>    <picker bindchange="bindPickerChange"  range="{{array}}">        <view>            当前选择:{{array[index]}}        </view>    </picker></view><view>    <view>时间选择器</view>    <picker mode="time"  start="09:01" end="21:01" bindchange="bind-    TimeChange">        <view>            当前选择: {{time}}        </view>    </picker></view><view>    <view>日期选择器</view>    <picker mode="date"  start="2015-09-01" end="2017-09-01" bindchange=    "bindDateChange">        <view>            当前选择: {{date}}        </view>    </picker></view>  

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

表21-20 radio属性说明

radio的示例代码如下。


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

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

表21-21 slider属性说明

slider的示例代码如下。


<view>    <text>设置left/right icon</text>    <view>        <slider bindchange="slider1change" left-icon="cancel" right-icon="success_        no_circle"/>    </view></view><view>    <text>设置step</text>    <view>        <slider bindchange="slider2change" step="5"/>    </view></view><view>    <text>显示当前value</text>    <view>        <slider bindchange="slider3change" show-value/>    </view></view><view>    <text>设置最小/最大值</text>    <view>        <slider bindchange="slider4change" min="50" max="200" show-value/>    </view></view>  

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

表21-22 switch属性说明

switch的示例代码如下。


<view>    <switch checked bindchange="switch1Change"/>    <switch bindchange="switch2Change"/></view>  

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

表21-23 textarea属性说明

textarea的示例代码如下。


<!--textarea.wxml--><view>    <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" /></view><view>    <textarea placeholder="placeholder颜色是红色的" placeholder-  /></view><view>    <textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus /></view><view>    <textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />    <view>        <button bindtap="bindButtonTap">使得输入框获取焦点</button>    </view></view>