微信小程序之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 () {    // 页面关闭  }})