range 小程序picker_微信小程序之picker组件

一般我们在填写收获信息的地址时，底部会弹起一个选择省市的选择器。小程序其实也给我们提供了这样一个选择器：

这个picker组件目前支持5种选择器，分别是普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器。现在让我们通过一个实例来看下吧：

<!--index.wxml-->
<view class="section">
    <view class="section__title">普通选择器</view>
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view class="picker">
            当前选择：{{array[index]}}
        </view>
    </picker>
</view>
<view class="section">
    <view class="section__title">多列选择器</view>
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" 
        range="{{multiArray}}">
        <view class="picker">
            当前选择: {{multiArray[0][multiIndex[0]]}}, {{multiArray[1][multiIndex[1]]}}, {{multiArray[2][multiIndex[2]]}}
        </view>
    </picker>
</view>
<view class="section">
    <view class="section__title">时间选择器</view>
    <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
        <view class="picker">
            当前选择：{{time}}
        </view>    
    </picker>
</view>
<view class="section">
    <view class="section__title">日期选择器</view>
    <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
        <view class="picker">
            当前选择：{{date}}
        </view>
    </picker>
</view>
<view class="section">
    <view class="section__title">省市区选择器</view>
    <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
        <view class="picker">
            当前选择：{{region[0]}}, {{region[1]}}, {{region[2]}}
        </view>
    </picker>
</view>
//index.js
Page({
    data: {
        array: ['美国', '中国', '巴西', '日本'],
        objectArray: [
            {
                id: 0,
                name: '美国'
            },
            {
                id: 1,
                name: '中国'
            },
            {
                id: 2,
                name: '巴西'
            },
            {
                id: 3,
                name: '日本'
            }
        ],
        index: 0,
        multiArray: [['无脊椎动物', '脊椎动物'], ['扁形动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉涤虫', '吸血虫']],
        objectMultiArray: [
            [
                {
                    id: 0,
                    name: '无脊椎动物'
                },
                {
                    id: 1,
                    name: '脊椎动物'
                }
            ], [
                {
                    id: 0,
                    name: '扁形动物'
                },
                {
                    id: 1,
                    name: '线形动物'
                },
                {
                    id: 2,
                    name: '环节动物'
                },
                {
                    id: 3,
                    name: '软体动物'
                },
                {
                    id: 3,
                    name: '节肢动物'
                }
            ], [
                {
                    id: 0,
                    name: '猪肉涤虫'
                },
                {
                    id: 1,
                    name: '吸血虫'
                }
            ]
        ],
        multiIndex: [0, 0, 0],
        date: '2020-09-01',
        time: '12:01',
        region: ['广东省', '广州市', '珠海区'],
        customItem: '全部'
    },
    bindPickerChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            index: e.detail.value
        })
    },
    bindMultiPickerChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value);
        this.setData({
            multiIndex: e.detail.value
        })
    },
    bindMultiPickerColumnChange: function (e) {
        console.log('修改的列为', e.detail.column, ', 值为', e.detail.value);
        var data = {
            multiArray: this.data.multiArray,
            multiIndex: this.data.multiIndex
        };
        data.multiIndex[e.detail.column] = e.detail.value;
        switch (e.detail.column) {
            case 0:
                switch (data.multiIndex[0]) {
                    case 0:
                        data.multiArray[1] = ['扁形动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
                        data.multiArray[2] = ['猪肉涤虫', '吸血虫'];
                        break;
                    case 1:
                        data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
                        data.multiArray[2] = ['鲫鱼', '带鱼'];
                        break;
                }
                data.multiIndex[1] = 0;
                data.multiIndex[2] = 0;
                break;
            case 1:
                switch (data.multiIndex[0]) {
                    case 0:
                        switch (data.multiIndex[1]) {
                            case 0:
                                data.multiArray[2] = ['猪肉涤虫', '吸血虫'];
                                break;
                            case 1:
                                data.multiArray[2] = ['蛔虫'];
                                break;
                            case 2:
                                data.multiArray[2] = ['蚂蚁', '蚂蝗'];
                                break;
                            case 3:
                                data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                                break;
                            case 4:
                                data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                                break;
                        }
                        break;
                    case 1:
                        switch (data.multiIndex[1]) {
                            case 0:
                                data.multiArray[2] = ['鲫鱼', '带鱼'];
                                break;
                            case 1:
                                data.multiArray[2] = ['青蛙', '娃娃鱼'];
                                break;
                            case 2:
                                data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                                break;
                        }
                        break;
                }
                data.multiIndex[2] = 0;
                console.log(data.multiIndex);
                break;
        }
        this.setData(data);
    },
    bindDateChange: function(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            date: e.detail.value
        })
    },
    bindTimeChange: function (e) {
        consoel.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            time: e.detail.value
        })
    },
    bindRegionChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            region: e.detail.value
        })
    }
})

今天的内容就到这里了，我们下期见。