小程序：底部弹起的滚动选择器（picker）

一. 说明

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

1. 普通选择器：mode = selector

属性名	类型	默认值	说明
range	Array / Object Array	[]	range是该选择器的选项内容。mode为普通选择器或多列选择器时，range有效。
range-key	String		当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Number	0	表示选择了 range数组中的第几个（下标从 0 开始）
bindchange	EventHandle		滚动选中时触发 change 事件，event.detail = {value: value}
disabled	Boolean	false	是否禁用
bindcancel	EventHandle		取消选择或点遮罩层收起 picker 时触发

// wxml  <!-- 普通选择器 -->  <view class="picker-container">    <text>普通选择器(字符串数组数据)：mode = selector</text>    <picker class="picker" mode="selector" range="{{array}}" value="{{index}}" bindchange="bindPickerChange" bindcancel="cancel">      <view class="picker">        当前选择：{{array[index]}}      </view>    </picker>  </view>  <view class="picker-container">    <text>普通选择器（对象数组数据）：mode = selector</text>    <picker class="picker" mode="selector" range="{{objectArray}}" range-key="name" value="{{index}}" bindchange="bindPickerChange">      <view class="picker">        当前选择：{{objectArray[index].name}}      </view>    </picker>  </view>// wxss.picker-container {  text-align: center;  margin-top: 20px;  background-color: yellow;  font-size: 40rpx;}.picker {  margin-left: 10%;  margin-right: 10%;  background-color: orange;}// js  data: {    // 普通选择器    array: ['苹果', '橘子', '香蕉', '西红柿'],  // 字符串数组    index: 1,  // 默认选中第几行    objectArray: [    // 对象数组      { id: 0, name: '苹果' },      { id: 1, name: '橘子' },      { id: 2, name: '香蕉' },      { id: 3, name: '西红柿'}    ], }，  bindPickerChange: function (event) {    console.log('picker发送选择改变，携带值为', event.detail.value)    this.setData({      index: event.detail.value    })  },  cancel: function (event) {    console.log("取消了");  },

2. 普通选择器：mode = multiSelector

属性名	类型	默认值	说明
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 的值表示变更值的下标
bindcancel	EventHandle		取消选择时触发
disabled	Boolean	false	是否禁用

// wxml  <!-- 多列选择器 -->  <view class="picker-container">    <text>多列选择器(二维数组) ：mode = multiSelector</text>    <picker class="picker" mode="multiSelector" range="{{multiArray}}" value="{{multiIndex}}" bindchange="multiBindchange">      <view class="picker">        当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}      </view>    </picker>  </view>// wxss.picker-container {  text-align: center;  margin-top: 20px;  background-color: yellow;  font-size: 40rpx;}.picker {  margin-left: 10%;  margin-right: 10%;  background-color: orange;}// js  data: {    multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],    multiIndex: [0, 1, 2],  },  multiBindchange: function (event) {    console.log('picker发送选择改变，携带值为', event.detail.value)    this.setData({      multiIndex: [event.detail.value[0], event.detail.value[1], event.detail.value[2]]    })  },  multiPickerColumnChange: function (e) {    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);  },

3. 时间选择器：mode = time

属性名	类型	默认值	说明
value	String		表示选中的时间，格式为"hh:mm"
start	String		表示有效时间范围的开始，字符串格式为"hh:mm"
end	String		表示有效时间范围的结束，字符串格式为"hh:mm"
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
bindcancel	EventHandle		取消选择时触发
disabled	Boolean	false	是否禁用

// wxml  <!-- 时间选择器 -->  <view class="picker-container">    <text>时间选择器：mode = time</text>    <picker class="picker" mode="time" value="{{timeValue}}" start="{{start}}" end="{{end}}" bindchange="timeChange">      <view class="picker">        当前选择: {{timeValue}}      </view>    </picker>  </view> // wxss.picker-container {  text-align: center;  margin-top: 20px;  background-color: yellow;  font-size: 40rpx;}.picker {  margin-left: 10%;  margin-right: 10%;  background-color: orange;}// js   data: {    timeValue: "12:00",  // 选中的时间    start: "00:00", // 开始时间    end: "24:00",  },  timeChange: function (event) {    let time = event.detail.value;    console.log(event);    this.setData({      timeValue: time    });  },

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		value 改变时触发 change 事件，event.detail = {value: value}
bindcancel	EventHandle		取消选择时触发
disabled	Boolean	false	是否禁用

// wxml  <!-- 日期选择器 -->  <view class="picker-container">    <text>日期选择器：mode = date</text>    <picker class="picker" fields="month" mode="date" value="{{dateValue}}" start="{{dateStart}}" end="{{dateEnd}}" bindchange="dateChange">      <view class="picker">        当前选择: {{dateValue}}      </view>    </picker>  </view>// js.picker-container {  text-align: center;  margin-top: 20px;  background-color: yellow;  font-size: 40rpx;}.picker {  margin-left: 10%;  margin-right: 10%;  background-color: orange;}// js data : {    dateValue: "2018-06-21",   // 日期选中时间    dateStart: "2018-01-01",   // 日期开始时间    dateEnd: "2018-12-30",     // 日期结束时间  },  dateChange: function (event) {    let date = event.detail.value;    console.log(event);    this.setData({      dateValue: date    });  },

5. 地区选择器：mode = region

属性名	类型	默认值	说明
value	Array	[]	表示选中的省市区，默认选中每一列的第一个值
custom-item	String		可为每一列的顶部添加一个自定义的项
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
bindcancel	EventHandle		取消选择时触发
disabled	Boolean	false	是否禁用

// wxml  <!-- 省市区选择器 -->  <view class="picker-container">    <text>省市区选择器：mode = region</text>    <picker class="picker" mode="region" value="{{regionValue}}" custom-item="{{custom}}" bindchange="regionChange">      <view class="picker">        当前选择: {{regionValue}}      </view>    </picker>  </view>// wxss.picker-container {  text-align: center;  margin-top: 20px;  background-color: yellow;  font-size: 40rpx;}.picker {  margin-left: 10%;  margin-right: 10%;  background-color: orange;}// js data : {    regionValue: ["山东省","枣庄市","滕州市"],  // 默认选中，不填或者空，就默认第一个    custom : "全部",},  regionChange: function (event) {    let region = event.detail.value;    console.log(event);    this.setData({      regionValue: region    });  },

文章转载于:https://www.jianshu.com/p/904e701f4a4d

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《小程序：底部弹起的滚动选择器（picker）》