首页 > 代码库 > 六: 表单标签(2)

六: 表单标签(2)

四、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则显示年月日。
 

六: 表单标签(2)