全部产品
云市场
云游戏

picker

更新时间:2019-09-09 15:18:30

本文介绍从底部弹起的滚动选择器(picker)。

属性名 类型 默认值 描述 最低版本
range String[] / Object[] [] String[] 时表示可选择的字符串列表 Object[] 时需指定 range-key 表示可选择的字段 -
range-key String - 当 range 是一个 Object[] 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 -
value Number - 表示选择了 range 中的第几个(下标从 0 开始)。 -
onChange EventHandle - value 改变时触发,event.detail = {value: value} -
disabled Boolean false 是否禁用 -

图示

代码示例

  1. <view class="section">
  2. <view class="section-title">地区选择器</view>
  3. <picker onChange="bindPickerChange" value="{{index}}" range="{{array}}">
  4. <view class="picker">
  5. 当前选择:{{array[index]}}
  6. </view>
  7. </picker>
  8. <picker onChange="bindObjPickerChange" value="{{arrIndex}}" range="{{objectArray}}" range-key="name">
  9. <view class="row">
  10. <view class="row-title">ObjectArray</view>
  11. <view class="row-extra">当前选择:{{objectArray[arrIndex].name}}</view>
  12. <image class="row-arrow" src="/image/arrowright.png" mode="aspectFill" />
  13. </view>
  14. </picker>
  15. </view>
  1. Page({
  2. data: {
  3. array: ['中国', '美国', '巴西', '日本'],
  4. objectArray: [
  5. {
  6. id: 0,
  7. name: '美国',
  8. },
  9. {
  10. id: 1,
  11. name: '中国',
  12. },
  13. {
  14. id: 2,
  15. name: '巴西',
  16. },
  17. {
  18. id: 3,
  19. name: '日本',
  20. },
  21. ],
  22. arrIndex: 0,
  23. index: 0
  24. },
  25. bindPickerChange(e) {
  26. console.log('picker发送选择改变,携带值为', e.detail.value);
  27. this.setData({
  28. index: e.detail.value,
  29. });
  30. },
  31. bindObjPickerChange(e) {
  32. console.log('picker发送选择改变,携带值为', e.detail.value);
  33. this.setData({
  34. arrIndex: e.detail.value,
  35. });
  36. },
  37. });