小程序picker用法

最新推荐文章于 2024-02-27 10:53:32 发布

原创最新推荐文章于 2024-02-27 10:53:32 发布 · 5.2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

微信小程序

picker

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分

普通选择器：mode = selector

多列选择器：mode = multiSelector（最低版本：1.4.0）

时间选择器：mode = time

日期选择器：mode = date

省市区选择器：mode = region（最低版本：1.4.0）

今天为大家介绍普通选择器和日期选择器

前端代码：普通选择器

<view class='course'>

<picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" range-key='title'>

<view class="course_icon"><span>所属课程：{{periodsname}}</span><image src='../../images/right_arrow.png'></image></view>

</picker>

</view>

注意：当objectArray为二维数组时需要设置range-key='你需要显示的字段名' value={{index}} ，index就是数据的索引值。

日期选择器：

<view class='time'>
      <picker mode="date" value="{{date}}" bindchange="bindDateChange">
      <view class="picker">
        截止时间：{{date}}
      </view>
    </picker>

属性名	类型	默认值	说明	最低版本
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		取消选择时触发	1.9.90
disabled	Boolean	false	是否禁用

js代码:

data: {
    objectArray:null,
    periodsname:'',
    index:0,
    date: '',
    cid:0
  },
  /**
   * 时间
   */
  bindDateChange(e) {
    this.setData({
      date: e.detail.value
    })
  },
  /**
   * 所属课程
   */
  bindPickerChange: function (e) {
    var index = e.detail.value;//这里会获取他的索引值
    var self = this;
    var periodslist = self.data.objectArray;
    var checkeriods = periodslist[index];
    self.setData({
      periodsname: checkeriods['title'],
      cid: checkeriods['cid']
    })
  },