首页 > 代码库 > 六： 表单标签（2）

六： 表单标签（2）

2024-08-22 11:00:36   224人阅读

四、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）


联系
我们