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

作者: Mccc_ | 来源:发表于2018-06-21 09:56 被阅读44次

一. 说明

从底部弹起的滚动选择器，现支持五种选择器，通过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
    });
  },

网友评论

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

本文链接：https://www.haomeiwen.com/subject/arxqyftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

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

一. 说明

1. 普通选择器：mode = selector

2. 普通选择器：mode = multiSelector

3. 时间选择器：mode = time

4. 日期选择器：mode = date

5. 地区选择器：mode = region

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

微信小程序

小程序基础

微信小程序开发

微信小程序开发者