微信小程序之picker从底部弹起的滚动选择器

微信官方文档：picker

 

picker

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

普通选择器（默认）

多列选择器

时间选择器

日期选择器

省市区选择器

一、普通选择器（默认）

普通选择器：mode = selector

wxml：

  <view class="section__title">普通选择器</view>
  <picker  mode="selector" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
        当前选择：{{array[index]}}
    </view>
  </picker>

js：

Page({
  data: {
    array: ['美国', '中国', '巴西', '日本'],
    objectArray: [
      {
        id: 0,
        name: '美国'
      },
      {
        id: 1,
        name: '中国'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ],
    index: 0

  },
  bindPickerChange: function (e) {
    console.log(e);
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  }
})

 

多列选择器：mode = multiSelector