4.5 picker / picker-view 选择器
4.5.1 picker 底部弹起的滚动选择器
从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
普通选择器：mode = selector
- range: 数据源(Array/Object Array) 作为选择器数据
- range-key: 当 range 是 Object Array 时， 通过 range-key 指定 Object 中 key 的值作为选择器显示内容
- value: 绑定的值，指选择 range 中第几个 (下标从 0 开始)
- bindcharge : value 改变时触发事件 event.datail = {value: value}
- disabled: 禁用
- bindcancel: 取消选择或者点击其他收起选择器时触发。
多列选择器： mode="multiSelector"
- range: 接受二维数组，二维数组对象，下表0为第一列，依次类推，放初次显示的数据
- range-key: 当 range 是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容，与普通选择器一样
- value、bindcharge、bindcancel 、disabled: 同普通选择器
- bindcolumnchange: 列值发生改变，就触发，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标
bindcolumnchange这个是核心，只要灵活使用这个，多列其实很简单，时间选择器就是简单多列选择器，只需要知道一开始数据即可，日期、省份选择器就是负责的多列选择器，每一列都有其子列对应的值，所以要做切换判断，所以用bindcolumnchange可以在这里判断第一列值发生改变时，修改第二列显示的数据
时间选择器： mode="time"
- value: 选中的时间，格式为"hh:mm"
- start / end: 有效时间范围的 开始/结束, 字符串格式为"hh:mm"
- bindchange、bindcancel、disabled: 同普通选择器
- disabled: 是否禁用
日期选择器： mode="date"
- value: 选中的日期，格式为"YYYY-MM-DD"
- start / end: 有效日期范围的 开始/结束, 字符串格式为"YYYY-MM-DD"
- fields: 选择器的范围，默认值data,还有 month、year属性值
- bindchange、bindcancel、disabled: 同普通选择器
省市区选择器：mode = region
- value: 表示选中的省市区，默认选中每一列的第一个值
- custom-item: 可为每一列的顶部添加一个自定义的项
- bindchange: value 改变时触发 change 事件，event.detail = {value: value, code: code, postcode: postcode}，其中字段code是统计用区划代码，postcode是邮政编码
- bindcancel、disabled: 同普通选择器
附加上面几个选择器的例子(别人写的，我觉得不错)：
<view class="section">
<view class="section__title">普通选择器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
当前选择：{{array[index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">多列选择器</view>
<picker
mode="multiSelector"
bindchange="bindMultiPickerChange"
bindcolumnchange="bindMultiPickerColumnChange"
value="{{multiIndex}}"
range="{{multiArray}}"
>
<view class="picker">
当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">时间选择器</view>
<picker
mode="time"
value="{{time}}"
start="09:01"
end="21:01"
bindchange="bindTimeChange"
>
<view class="picker">
当前选择: {{time}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">日期选择器</view>
<picker
mode="date"
value="{{date}}"
start="2015-09-01"
end="2017-09-01"
bindchange="bindDateChange"
>
<view class="picker">
当前选择: {{date}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">省市区选择器</view>
<picker
mode="region"
bindchange="bindRegionChange"
value="{{region}}"
custom-item="{{customItem}}"
>
<view class="picker">
当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</view>
Page({
data:{
array:[1,2,3,4,5,6,7,8,9,0],
arrayObj:[
{ id: 1001, name: "jack" },
{ id: 1002, name: "lilei" },
{ id: 1003, name: "hanmeimei" },
{ id: 1004, name: "lucy" },
{ id: 1005, name: "poly" }
],
showme: "请选择一个人名",
arrayMulti: [
[1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
],
arrayObjMulti:[
[
{ id: 1001, name: "jack" },
{ id: 1002, name: "lilei" },
{ id: 1003, name: "hanmeimei" },
{ id: 1004, name: "lucy" },
{ id: 1005, name: "poly" }
],
[
{ id: 1001, name: "jack" },
{ id: 1002, name: "lilei" },
{ id: 1003, name: "hanmeimei" },
{ id: 1004, name: "lucy" },
{ id: 1005, name: "poly" }
]
],
timeLable: "请选择时间",
dateLable: "请选择日期",
cityLable: "请选择城市"
},
changeme: function(e) {
var index = e.detail.value;
console.log("index下标值为: " + index);
var id = this.data.arrayObj[index].id;
var name = this.data.arrayObj[index].name;
this.setData({
showme: id + name
});
},
cancelme: function (e) {
console.log("触发取消事件...");
},
columnchange:function(e) {
console.log(e.detail);
},
changemeMulti: function(e) {
var indexs = e.detail.value;
var arrayObjMulti = this.data.arrayObjMulti;
for (var i = 0; i < indexs.length ; i ++) {
var indexTmp = indexs[i];
var id = arrayObjMulti[i][indexTmp].id;
var name = arrayObjMulti[i][indexTmp].name;
console.log(id + " " + name);
}
},
changeTime: function(e) {
this.setData({
timeLable: e.detail.value
});
},
changeDate: function (e) {
this.setData({
dateLable: e.detail.value
});
},
changeCity: function (e) {
this.setData({
cityLable: e.detail.value
});
}
})
4.5.2 picker-view 嵌入页面的滚动选择器
- value: 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
- indicator-style / indicator-class: 设置选择器中间选中框的 样式/类名
- mask-style / mask-class：设置蒙层的 样式/类名
- bindchange: 事件触发
- bindpickstart / bindpickend：当滚动选择 开始/结束 时候触发事件（2.3.1版本支持）
<picker-view-column>子标签，一列就需要一个
<picker-view style='width:100%;height:250px;' bindchange="changeme">
<picker-view-column>
<view wx:for="{{year}}">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{month}}">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{day}}">{{item}}</view>
</picker-view-column>
</picker-view>
Page({
data: {
year: [1990, 1995, 2000, 2005, 2010, 2015, 2020],
month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
day: [1, 5, 10, 15, 20, 25, 30],
myvalue: "请选择日期"
},
changeme: function (e) {
var indexs = e.detail.value;
var year = this.data.year[indexs[0]];
var month = this.data.month[indexs[1]];
var day = this.data.day[indexs[2]];
this.setData({
myvalue: year + "年" + month + "月" + day + "日"
});
}
})
4.6 radio-group & radio
4.6.1 radio-group
-
bindchange: 选中项发生改变时触发
-
包含 radio 单选项
4.6.2 radio
- value: 选中时携带的值
- checked: 选中，默认 false
- disabled: 禁用，默认 flase
- color: 选项框颜色
<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>
Page({
data: {
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'}
]
},
radioChange(e) {
console.log('radio发生change事件，携带value值为：', e.detail.value)
}
})
4.7 slider 滑动选择器
- min / max: 最 小/大 值
- step: 步长，必须大于0，且可以被 (max-min) 整除
- disabled: 禁用
- value: 选中值
- activeColor / backgroundColor: 已选择/未选择 的颜色
- block-size: 滑块大小 12-28之间，默认28
- block-color: 滑块颜色
- show-value：是否展示当前值，默认值 false
- bindchanging: 滑动过程触发事件
- bindchange: 滑动一次完成后触发事件
<slider min="10" max="90" show-value="{{true}}" activeColor="red" backgroundColor="blue" block-color="green" bindchanging="" bindchange='changeme'></slider>
<view style='background-color:green;width:100%;height:{{myheight}};'></view>
Page({
data: {
myheight: "500rpx",
staticHeight: 500
},
iamchanging:function(e) {
var val = e.detail.value;
var newHeight = this.data.staticHeight * (val/100);
this.setData({
myheight: newHeight + "rpx"
});
},
changeme: function (e) {
var val = e.detail.value;
var newHeight = this.data.staticHeight * (val / 100);
this.setData({
myheight: newHeight + "rpx"
});
}
})
4.8 switch 开关选择器
- checked: 选中，默认值 false
- disabled: 禁用，默认值 false
- type: 样式，默认值switch, 还有 checkbox
- bindchange： checked改变时触发
- color： swictch 颜色
<view class="body-view">
<switch checked bindchange="switch1Change" />
<switch type="checkbox" bindchange="switch2Change" />
</view>
Page({
switch1Change(e) {
console.log('switch1 发生 change 事件，携带值为', e.detail.value)
},
switch2Change(e) {
console.log('switch2 发生 change 事件，携带值为', e.detail.value)
}
})
4.9 textarea 多行输入框
- 基本 input 属性都有
- auto-height：自动增高，默认 false，设置文本框高度后自动失效
- show-confirm-bar: 显示键盘上方带有”完成“按钮那一栏, 默认值true
- bindlinechange: 当行数发生变化时触发，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
- bindinput: 触发时，并不能返回一段字符串替换当前文本框，与input 输入框的区别
下节介绍导航组件
扫一扫
4833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
