uniapp

【普通json数组】

针对官方的普通json数组示例，做些填充

<template>
    <view>
        <view class="uni-title uni-common-pl">地区选择器</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-db">
                    <picker @change="bindPickerChange" :value="index" :range="array">
                        <view class="uni-input">{{array[index]}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <view class="uni-title uni-common-pl">地区选择器(普通Json数组)</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-db">
                    <picker @change="bindPickerChanges" range-key="name" :data-index="22" :data-id="objectArray[index].id" :value="index" :range="objectArray">
                       <view class="uni-input">{{objectArray[index].name}}</view>
                       <!-- 还是建议用input保存,可能picker更新不及时 -->
                       <input type="text" :value="objectArray[index].id" hidden/>
                   </picker>
                </view>
            </view>
        </view>

        <view class="uni-title uni-common-pl">时间选择器</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-db">
                    <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
                        <view class="uni-input">{{time}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <view class="uni-title uni-common-pl">日期选择器</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-db">
                    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                        <view class="uni-input">{{date}}</view>
                    </picker>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            const currentDate = this.getDate({
                format: true
            })
            return {
                title: 'picker',
                array: ['中国', '美国', '巴西', '日本'],
                objectArray: [{
                        id: 11,
                        name: '中国'
                    },
                    {
                        id: 12,
                        name: '美国'
                    },
                    {
                        id: 13,
                        name: '德国'
                    },
                    {
                        id: 14,
                        name: '法国'
                    }
                ],
                index: 0,
                date: currentDate,
                time: '12:01'
            }
        },
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            }
        },
        methods: {
            bindPickerChange: function(e) {
                console.log('picker发送选择改变，携带值为', e.target.value)
                this.index = e.target.value
            },
            bindPickerChanges: function(e) {
                this.index = e.detail.value
                console.log('可以传data-xx:xx',e.currentTarget.dataset.index,'
默认传过来的是下标：',e.detail.value,'
也可以传普通json传过来的id等：',e.currentTarget.dataset.id);
            },
            bindDateChange: function(e) {
                this.date = e.target.value
            },
            bindTimeChange: function(e) {
                this.time = e.target.value
            },
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                }
                month = month > 9 ? month : '0' + month;;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            }
        }
    }
</script>