微信小程序picker滚动选择器组件

微信小程序picker滚动选择器组件

picker组件是一种从页面底部弹出的滚动选择器，根据mode属性的不同进行不同的参数设置，以达到滚动选择不同数据的效果，目前系统自带的有时间选择器、日期选择器和区域选择器，还有可以通过自定义参数来设置的普通选择器和多列选择器。

picker有一个参数为mode，通过设置mode的值可以区分不同类型的选择器。

1．普通选择器mode值为selector参数：

• range：Array/Object类型，默认值为空。
• range-key：String类型，当range是一个对象数组时，通过指定key来作为选择器显示的内容。
• value：Number类型，默认值为0，value表示选择器弹出后，默认选择器数组的下标。
• bindchange：EventHandle类型，当选择器改变选择数值时会触发对应的事件，event.detail.value取出的是选择器数组的下标，而非值。
• disabled：Boolean类型，默认值为false，当设置为true时，单击不会弹出选择器。
• bindcancel：EventHandle类型，单击“取消”或遮罩层时会触发对应的事件，单击“确定”时不会触发对应的事件。

普通选择器示例代码如下：

<!--index.wxml-->
<view>普通选择器：</view>
<picker mode='selector' range='{{array}}' value='4' bindchange='bindchange' bindcancel='bindcancel'>
<view class='center'>单击选择:{{value}}</view>
</picker>
/**index.wxss**/
.center{
 text-align: center}
// index.js
Page({
  data:{
    array:[1,2,3,4,5,6,7,8,9],
    value: '',
},
//选择数值更改
bindchange: function(e){
  var value = this.data.array[e.detail.value];
  this.setData({
   value: value
  })
},
bindcancel: function(){
  console.log('选择器隐藏');
   }
  })

普通选择器示例如图所示：

2．多列选择器mode值为multiSelector参数：

• range：二维Array/二维Object类型，默认值为空，当mode值为multiSelector时，range必须是二维Array/二维Object，例如：[[‘A’,’B’,’C’],[‘1’,’2’,’3’]]。
• range-key：String类型，当range是一个二维对象数组时，通过指定key来作为选择器显示的内容。
• value：Array类型，默认值为[]，value表示选择器弹出后，默认选择器数组的下标，value每一项对应range中的每一项。
• bindchange：EventHandle类型，当选择器改变选择数值时会触发对应的事件，event.detail[0]取出的是选择器某一列的下标，event.detail[1]取出的是选择器某一行的下标，而非值。
• bindcolumnchange：EventHandle类型，当某一列的值发生改变时，会触发bindcolumnchange对应的事件，event.detail.column的值表示改变了第几列，event.detail.value的值表示改变了对应的下标。
• disabled：Boolean类型，默认值为false，当设置为true时，单击不会弹出选择器。
• bindcancel：EventHandle类型，单击“取消”或遮罩层时会触发对应的事件，单击“确定”时不会触发对应的事件。
  多项选择器示例代码如下：

<!--index.wxml-->
<view>多项选择器：</view>
<picker mode='multiSelector' range='{{array}}' value='{{[4,2]}}' bindchange='bindchange'
bindcolumnchange='bindcolumnchange' bindcancel='bindcancel'>
<view class='center'>单击选择:{{col}}--{{value}}</view>
</picker>
/**index.wxss**/
.center{
  text-align: center
}
// index.js
Page({
  data:{
    array:[['a','b','c','d','e','f'],
            [1,2,3,4,5,6,7,8,9]],
    col: '',
    value: '',
  },
  // 选择数值更改
  bindchange: function(e){
    console.log(e.detail.value);
    var selArr = e.detail.value;
    var col = this.data.array[0][selArr[0]];
    var value = this.data.array[1][selArr[1]];
    this.setData({
      col: col,
      value: value
    })
  },
  // 更改值调用函数
  bindcolumnchange: function(e){
    console.log(e.detail);
  },
  bindcancel: function(){
    console.log('选择器隐藏');
  }
})

多项选择器示例如图所示：

3．时间选择器mode值为time参数：

• value：String类型，默认值为0，表示选中的时间，格式为“hh:mm”。
• start：String类型，表示最早的时间，字符串格式为“hh:mm”。早于这个时间的将不能被选中。
• end：String类型，表示最晚的时间，字符串格式为“hh:mm”。晚于这个时间的将不能被选中。
• bindchange：EventHandle类型，当选择器改变选择数值时会触发对应的事件，event.detail.value取出的是当前选择的时间。
• disabled：Boolean类型，默认值为false，当设置为true时，单击不会弹出选择器。
• bindcancel：EventHandle类型，单击“取消”或遮罩层时会触发对应的事件，单击“确定”时不会触发对应的事件。

时间选择器示例代码如下：

<!--index.wxml-->
<view>时间选择器：</view>
<picker mode='time' value='12:12' start='9:00' end='17:00' bindchange='bindchange'>
<view class='center'>单击选择:{{selTime}}</view>
</picker>
/**index.wxss**/
.center{
  text-align: center
}
// index.js
Page({
  data:{
selTime:'12:12'
  },
  // 选择数值更改
  bindchange: function(e){
console.log(e.detail.value);
this.setData({
  selTime: e.detail.value
})
  },
})

时间选择器示例如图所示：

4．日期选择器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类型，当选择器改变了选择数值时会触发对应的事件，event.detail.value取出的是当前选择的日期。
• disabled：Boolean类型，默认值为false，当设置为true时，单击不会弹出选择器。
• bindcancel：EventHandle类型，单击“取消”或遮罩层时会触发对应的事件，单击“确定”时不会触发对应的事件。

日期选择器示例代码如下：

<!--index.wxml-->
<view>日期选择器：</view>
<picker    mode='date'    value='2018-10-01'    start='1993-01-01'    end='2028-12-12'
bindchange='bindchange'>
<view class='center'>单击选择:{{selTime}}</view>
</picker>
/**index.wxss**/
.center{
  text-align: center
}
// index.js
Page({
  data:{
    selTime:'2018-10-01'
  },
  // 选择数值更改
  bindchange: function(e){
    console.log(e.detail.value);
    this.setData({
      selTime: e.detail.value
    })
  },
})

日期选择器示例如图所示：

5．区域选择器mode值为region参数：

• value：Array类型，默认值为[]，表示选中的省市区，传对应的数字即可，如[3,2,1]，注意不要越界，下标从0开始。
• custom-item：String类型，为每一列的顶部添加一个自定义的项。
• bindchange：EventHandle类型，当选择器改变选择数值时会触发对应的事件，通过event.detail来获取选择的数据，有邮编、各级邮编、各级名称，并以数组的形式返回。
• disabled：Boolean类型，默认值为false，当设置为true时，单击不会弹出选择器。
• bindcancel：EventHandle类型，单击“取消”或遮罩层时会触发对应的事件，单击“确定”时不会触发对应的事件。

区域选择器示例代码如下：

<!--index.wxml-->
<view>区域选择器：</view>
<picker mode='region' value='{{[3,2,1]}}' custom-item='qcf' bindchange='bindchange'>
<view class='center'>单击选择:{{selArea}}</view>
</picker>
/**index.wxss**/
.center{
  text-align: center
}
// index.js
Page({
  data:{
selArea:'',
  },
  // 选择数值更改
  bindchange: function(e){
console.log(e.detail);
var areaArr = e.detail.value;
var area='';
for(var i=0;i<areaArr.length;i++){
  area += areaArr[i];
      }
      this.setData({
        selArea: area
      })
    },
  })

区域选择器示例如图所示：

酷客网相关文章：

• 微信小程序textarea多行输入框组件
• 微信小程序input输入框组件
• 微信小程序label扩展组件
• 微信小程序radio单选项组件