字節(jié)跳動小程序開發(fā)組件文檔 picker

從底部彈起的滾動選擇器，現(xiàn)支持五種選擇器，通過mode屬性來設(shè)置，分別是普通選擇器，多列選擇器，時間選擇器，日期選擇器，省市區(qū)選擇器，默認(rèn)是普通選擇器。

mode = selector

普通選擇器。

mode = multiSelector

多列選擇器。

WARNING

range最多支持5列數(shù)據(jù)，超出部分會直接忽略

mode = time

時間選擇器。

mode = date

日期選擇器。

mode = region

地區(qū)選擇器。

示例

開發(fā)者工具中預(yù)覽

<view class="section__title">普通選擇器</view>
<picker value="{{index}}" range="{{array}}"
    bindchange="bindPickerChange" bindcancel="bindPickerCancel">
  <view class="picker">
    當(dāng)前選擇：{{array[index]}}
  </view>
</picker>

<view class="section__title">普通Object選擇器</view>
<picker bindchange="bindObjectPickerChange"
    value="{{objectIndex}}" range="{{objectArray}}" range-key="en">
  <view class="picker">
    當(dāng)前選擇：{{objectArray[objectIndex]['en']}}
  </view>
</picker>

<view class="section__title">多列選擇器</view>
<picker mode="multiSelector"
    bindchange="bindMultiPickerChange"
    bindcolumnchange="bindMultiPickerColumnChange"
    value="{{multiIndex}}" range="{{multiArray}}">
  <view class="picker">
    當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}}，
    {{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
  </view>
</picker>

<view class="section__title">時間選擇器</view>
<picker mode="time" value="{{time}}" start="{{timeStart}}" end="{{timeEnd}}"
    bindchange="bindTimeChange">
  <view class="picker">
    當(dāng)前選擇: {{time}}
  </view>
</picker>

<view class="section__title">日期選擇器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01"
    bindchange="bindDateChange" fields="year">
  <view class="picker">
    當(dāng)前選擇: {{date}}
  </view>
</picker>

<view class="section__title">日期選擇器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01"
    bindchange="bindDateChange" fields="month">
  <view class="picker">
    當(dāng)前選擇: {{date}}
  </view>
</picker>

<view class="section__title">日期選擇器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01"
    bindchange="bindDateChange" fields="day">
  <view class="picker">
    當(dāng)前選擇: {{date}}
  </view>
</picker>

var ms = [
    [// 0
        '無脊柱動物',
        '脊柱動物'
    ],
    [// 1
        [// 1 0
            '扁性動物',
            '線形動物',
            '環(huán)節(jié)動物',
            '軟體動物',
            '節(jié)肢動物'
        ],
        [// 1 1
            '魚',
            '兩棲動物',
            '爬行動物',
      'test'
        ]
    ],
    [// 2
        [// 2 0
            ['豬肉絳蟲', '吸血蟲'],
            ['蛔蟲'],
            ['螞蟻', '螞蟥'],
            ['河蚌', '蝸牛', '蛞蝓'],
            ['昆蟲', '甲殼動物', '蛛形動物', '多足動物']
        ],
        [// 2 1
            ['鯽魚', '帶魚'],
            ['青蛙', '娃娃魚'],
            ['蜥蜴', '龜', '壁虎'],
      []
        ]
    ]
];
Page({
    data: {
        array: ['美國', '中國', '巴西', '日本'],
        index: 0,
        objectArray: [
            {
                id: 0,
                name: '美國',
                en: 'USA'
            },
            {
                id: 1,
                name: '中國',
                en: 'China'
            },
            {
                id: 2,
                name: '巴西',
                en: "Brasil"
            },
            {
                id: 3,
                name: '日本',
                en: "Japan"
            }
        ],
        objectIndex: 0,
        multiArray: [
            ['無脊柱動物', '脊柱動物'],
            ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'],
            ['豬肉絳蟲', '吸血蟲']
        ],
        multiIndex: [0, 0, 0],
        objectMultiIndex: [0,0,0],
        date: '2016-09-01',
        time: '12:01',
        timeStart: '09:01',
        timeEnd: '21:01'
    },
    bindPickerChange: function (e) {
        console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
        this.setData({
            index: e.detail.value
        })
    },
    bindObjectPickerChange: function (e) {
        console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
        this.setData({
            objectIndex: e.detail.value
        })
    },
    bindMultiPickerChange: function (e) {
        console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
        this.setData({
            multiIndex: e.detail.value
        })
    },
    bindMultiPickerColumnChange: function (e) {
        // return;
        console.log('修改的列為', e.detail.column, '，值為', e.detail.value);
        var data = {
            multiArray: this.data.multiArray,
            multiIndex: this.data.multiIndex
        };
        switch (e.detail.column) {
            case 0:
                data.multiIndex[0] = e.detail.value;
                data.multiIndex[1] = 0;
                data.multiIndex[2] = 0;

                data.multiArray[1] = ms[1][data.multiIndex[0]];
                data.multiArray[2] = ms[2][data.multiIndex[0]][data.multiIndex[1]];
                break;
            case 1:
                data.multiIndex[1] = e.detail.value;
                data.multiIndex[2] = 0;

                data.multiArray[2] = ms[2][data.multiIndex[0]][data.multiIndex[1]];
                break;
            case 2:
                data.multiIndex[2] = e.detail.value;
                break;
        }
        this.setData(data);
    },
    bindDateChange: function (e) {
        console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
        this.setData({
            date: e.detail.value
        })
    },
    bindTimeChange: function (e) {
        console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
        this.setData({
            time: e.detail.value
        })
    },
    bindPickerCancel: function (e) {
        console.log(e);
        tt.showToast({title: 'cancel'})
    }
})