六： 表单标签

Posted 2020-08-20 淡定君

四、input 

value	String		输入框的内容
type	String	text	input的类型，有效值：text,number,idcard,digit,time,date
password	Boolean	false	是否是密码类型
placeholder	String		输入框为空时占位符
placeholder-style	String		指定placeholder的样式
placeholder-class	String	input-placeholder	指定placeholder的样式类
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为0的时候不限制最大长度
auto-focus	Boolean	false	自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性
focus	Boolean	false	使得input获取焦点
bindchange	EventHandle		输入框失去焦点时，触发bindchange事件，event.detail={value:value}
bindinput	EventHandle		除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。
bindfocus	EventHandle		输入框聚焦时触发，event.detail = {value:value}
bindblur	EventHandle		输入框失去焦点时触发，event.detail = {value:value}

这里就不演示很多了，没什么难点 可以动手去试一试。

 

五、label

1 2 3 4 5 6 7 8 9

/* ---page/test/test.wxml----*/   <checkbox-group>     <checkbox id="che" checked=‘true‘ value="男">男</checkbox> </checkbox-group> <label for="che" style="display:block;">点击我,我绑定于上面的多选按钮</label>   /* ---page/test/test.wxml----*/

他起到一个绑定作用，举个栗子。如上。。我点击label的时候也会触发 id为che 的checked属性。

他目前可以绑定的控件有 button，checkbox，radio，switch 。 for 优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

 

六、picker 滚动选择器

他类似与 html中的  select 。同样用w3c的 实例代码。。其实这些代码 就相当于 html中的标签。。。除了修改样式 基本就是功能了。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

/* ---page/test/test.wxml----*/   <view>     <view>地区选择器</view>     <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">         <view>             当前选择：{{array[index]}}         </view>     </picker> </view> <view class="section">     <view>时间选择器</view>     <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">         <view class="picker">             当前选择: {{time}}         </view>     </picker> </view>   <view>     <view>日期选择器</view>     <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">         <view>             当前选择: {{date}}         </view>     </picker> </view>   /* ---page/test/test.wxml----*/

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

/* ---page/test/test.js----*/   Page({   data: {     array:["美国","中国","巴西","日本"],     index:0,     date:"2016-09-01",     time:"12:01"   },   bindPickerChange: function(e) {     console.log(‘picker发送选择改变，携带值为‘, e.detail.value)     this.setData({       index: e.detail.value     })   },   bindDateChange:function(e){     this.setData({       date:e.detail.value     })   },   bindTimeChange:function(e){     this.setData({       time:e.detail.value     })   } })   /* ---page/test/test.js----*/

普通选择器：mode=selector

属性名	类型	默认值	说明
range	Array	[]	mode为selector时，range有效
value	Number	0	mode为selector时，是数字，表示选择了range中的第几个，从0开始。
bindchange	EventHandle		value改变时触发change事件，event.detail= { value:value}

时间选择器：mode=time

属性名	类型	默认值	说明
value	String		表示选中的时间，格式为"hh:mm"
start	String		表示有效时间范围的开始，字符串格式为"hh:mm"
end	String		表示有效时间范围的结束，字符串格式为"hh:mm"
bindchange	EventHandle		value改变时触发change事件，event.detail= { value:value}

日期选择器：mode=date

属性名	类型	默认值	说明
value	String	0	表示选中的日期，格式为"yyyy-MM-dd"
start	String		表示有效日期范围的开始，字符串格式为"yyyy-MM-dd"
end	String		表示有效日期范围的结束，字符串格式为"yyyy-MM-dd"
fields	String	day	有效值year,month,day，表示选择器的粒度
bindchange	EventHandle		value改变时触发change事件，event.detail= { value:value}

值得注意的是 mode=date 中的 fields属性 year只显示年，month显示年月。day则显示年月日。