微信小程序之picker组件

作为移动端的分发入口，微信小程序虽然没有当初期望的那么火，但是却是一个不能忽视的入口。撇开微信小程序对于腾讯生态的原因不说，微信小程序对于开发还是很方便的，特别是对于白痴选手来说，基本不需要多少过多的学习，就能写一个不错的小程序。

下面就微信小程序常见的组件分别做详细的介绍，本篇主要介绍picker组件。运行效果如下：



picker选择器分为5种：分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器，可以用mode属性区分。

属性

普通选择器

设置mode = selector。

属性名	类型	默认值	说明
range	Array / Object Array	[]	mode为 selector 或 multiSelector 时，range 有效
range-key	String		当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Number	0	value 的值表示选择了 range 中的第几个（下标从 0 开始）
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
disabled	Boolean	false	是否禁用

多列选择器

mode = multiSelector（最低版本：1.4.0）。

属性名	类型	默认值	说明
range	二维Array / 二维Object Array	[]	mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[[“a”,”b”], [“c”,”d”]]
range-key	String		当 range 是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Array	[]	value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
bindcolumnchange	EventHandle		某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标
disabled	Boolean	false	是否禁用

时间选择器

时间选择器：mode = time。

日期选择器

日期选择器：mode = date。



fields 自动对应的有效值：

省市区选择器

mode = region（最低版本：1.4.0）。

官方示例

示例代码：

picker.wxml

<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>

对应的packer.js文件

Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
objectArray: [
{
id: 0,
name: '美国'
},
{
id: 1,
name: '中国'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0,
multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
objectMultiArray: [
[
{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
], [
{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
], [
{
id: 0,
name: '猪肉绦虫'
},
{
id: 1,
name: '吸血虫'
}
]
],
multiIndex: [0, 0, 0],
date: '2016-09-01',
time: '12:01',
region: ['广东省', '广州市', '海珠区'],
customItem: '全部'
},
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function (e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[2] = ['蛔虫'];
break;
case 2:
data.multiArray[2] = ['蚂蚁', '蚂蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃鱼'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
console.log(data.multiIndex);
break;
}
this.setData(data);
},
bindDateChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
bindTimeChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
},
bindRegionChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})

注：关于wxss样式文件这里不再罗列

省市县示例

我们再来看一下本文开始的时候的例子：



相关代码如下：

feedback.wxml

<view class="container">
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
<view class="fb-type">
<view class="type-label">{{array[index]}}</view>
<image class="type-icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/pickerArrow-a8b918f05f.png"></image>

</view>
</view>
</picker>
<view class="fb-body">
<textarea class="content" placeholder="对我们网站、商品、服务，你还有什么建议吗？你还希望在严选上买到什么？请告诉我们..." />
<view class="text-count">0/500</view>
</view>
<view class="fb-mobile">
<view class="label">手机号码</view>
<view class="mobile-box">
<input class="mobile" placeholder="方便我们与你联系" />
<image class="clear-icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/clear-fb-dd9d604f86.png"></image>
</view>
</view>

<button class="fb-btn">提交</button>
</view>

样式文件feedback.wxss

page{
background: #f4f4f4;
min-height: 100%;
}

.container{
background: #f4f4f4;
min-height: 100%;
padding-top: 30rpx;
}

.fb-type{
height: 104rpx;
width: 100%;
background: #fff;
margin-bottom: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
padding-left: 30rpx;
padding-right: 30rpx;
}

.fb-type .type-label{
height: 36rpx;
flex: 1;
color: #333;
font-size: 28rpx;
}

.fb-type .type-icon{
height: 36rpx;
width: 36rpx;
}

.fb-body{
width: 100%;
background: #fff;
height: 374rpx;
padding: 18rpx 30rpx 64rpx 30rpx;
}

.fb-body .content{
width: 100%;
height: 100%;
color: #333;
line-height: 40rpx;
font-size: 28rpx;
}

.fb-body .text-count{
padding-top: 17rpx;
line-height: 30rpx;
float: right;
color: #666;
font-size: 24rpx;
}

.fb-mobile{
height: 162rpx;
width: 100%;
}

.fb-mobile .label{
height: 58rpx;
width: 100%;
padding-top: 14rpx;
padding-bottom: 11rpx;
color: #7f7f7f;
font-size: 24rpx;
padding-left: 30rpx;
padding-right: 30rpx;
line-height: 33rpx;
}

.fb-mobile .mobile-box{
height: 104rpx;
width: 100%;
color: #333;
padding-left: 30rpx;
padding-right: 30rpx;
font-size: 24rpx;
background: #fff;
position: relative;
}

.fb-mobile .mobile{
position: absolute;
top: 27rpx;
left: 30rpx;
height: 50rpx;
width: 100%;
color: #333;
line-height: 50rpx;
font-size: 24rpx;
}

.clear-icon{
position: absolute;
top: 43rpx;
right: 30rpx;
width: 28rpx;
height: 28rpx;
}

.fb-btn{
width: 100%;
height: 98rpx;
line-height: 98rpx;
background: #b4282d;
position: fixed;
bottom: 0;
left: 0;
border-radius: 0;
color: #fff;
font-size: 28rpx;
}

逻辑js：feedback.js

var app = getApp();

Page({
data: {
array: ['请选择反馈类型', '商品相关', '物流状况', '客户服务', '优惠活动', '功能异常', '产品建议', '其他'],
index: 0,
},
bindPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
onLoad: function (options) {
},
onReady: function () {

},
onShow: function () {

},
onHide: function () {
// 页面隐藏

},
onUnload: function () {
// 页面关闭
}
})