小程序组件--滚动选择器

选择器不是指css那种样式选择器

小程序的滚动选择器就是一种可以从众多条目中选择一个的组件

使用picker标签表示, picker也分不同的类型, 根据picker的一个属性mode来区分

mode = 'selector'普通选择器

mode = 'time'时间选择器

mode = 'date'日期选择器

如果没有mode属性, 则默认就是普通选择器

普通选择器:

<view class='container'>
  <picker range='{{cityArr}}' vlaue='{{cityArr[index]}}' bindchange='cityChange' mode='selector'>
    <button size='mini'>{{cityArr[index]}} | 修改城市</button>
  </picker>
</view>

rang表示要选择的范围, 为数组类型(或对象数组), 即要表示多个值

value当前显示项

bingchang修改当前值的事件

Page({
  data: {
    cityArr : ["北京", "上海", '广州', '成都'],
    index:0
  },
  cityChange : function(e) {
    this.setData({
      index : e.detail.value    /*获取到的就是rang范围中的 当前选中项的下标*/
    });
  }
})

时间选择器:

<view class='container'>
  <picker mode='time' start='08:10' end='22:30' value='{{currentTime}}' bindchange='timeChange'>
    <button size='mini'>{{currentTime}} | 设置时间</button>
  </picker>
</view>

时间选择器(mode='time')常用属性

start开始选择的时间, 也就是能选择的最小值(这里设置的是08:10)

end与start相反

value当前显示项

bindchang事件处理

Page({
  data: {
    currentTime : "12:10"
  },
  timeChange : function(e) {
    this.setData({
      currentTime : e.detail.value        /*没有下标, 获取到的值就是当前项*/
    });
  }
})

日期选择器:

<view class='container'>
  <picker start='2008:05:12' end='2018:07:26' bindchange='dateChange' mode='date' value='{{currentDate}}'>
    <button size='mini'>{{currentDate}} | 修改日期</button>
  </picker>
</view>

start, end, value, bindchang所表示的意思和上面的几乎是一样的(和mode='time')

Page({
  data: {
    currentDate : "2010:1:01"
  },
  dateChange : function(e) {
    this.setData({
      currentDate : e.detail.value    
    });
  }
})

小程序组件--滚动选择器

猜你喜欢