微信小程序表单的使用 微信小程序

shuke 11月前 181

微信小程序表单的使用

表单Form的应用很广泛,

我们可以利用form设计登录注册,

也可以设计一种答题问卷的形式 .

但是微信小程序的表单与H5的表单写法还是不一样的。这点大家需要注意;


表单:表单中 formType 为 submit 的 <button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

	<form bindsubmit="formSubmit" bindreset="formReset">
	<button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
	</form>


输入框:bindinput输入, bindfocus输入框聚焦, bindblur失去焦点, bindconfirm完成按钮; type=text,number,idcard,digit

 <input  bindinput="bindKeyInput" placeholder="输入同步到view中" value=""  type="text" disabled/>


标识lable :for 目前可以绑定的控件有:<button/>, <checkbox/>, <radio/>, <switch/>。


按钮:types = ['default', 'primary', 'warn']

<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>


单项选择器:radio-group

<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>
eg:
<radio-group name="radio-group">
      <label><radio value="radio1"/>radio1</label>
      <label><radio value="radio2"/>radio2</label>
    </radio-group>


多项选择器:checkbox-group

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


底部弹起的滚动选择器:picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。

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


滑动选择器:slider

<slider bindchange="slider4change" min="50" max="200" show-value/>


开关选择器:switch

<switch checked bindchange="switch1Change"/>


上传的附件:
最新回复 (0)
全部楼主
返回