更新记录

1.0.0（2020-11-30）

适用于ios和安卓的自定义picker（微信小程序）

平台兼容性

解决使用原生picker选择器，ios和安卓样式不一致的问题

参数介绍

• popHeight(picker的整体高度，必填，单位为vh，本人为新手，有需要的自己可以改源码)
• isDatePicker(用的是年月日选择器还是时分选择)
• kYear(自定义年，不传，默认为当前时间)
• kMonth(自定义月，不传，默认为当前时间)
• kDay(自定义日，不传，默认为当前时间)
• kHour(自定义时，不传，默认为当前时间)
• kMin(自定义分，不传，默认为当前时间)

例子

<template>
    <view class="timePopup" :style="{ height: popHeight + 'vh'}">
        <view class="" v-if="isDatePicker">
            <picker-view :style="{ height: popHeight - 10 + 'vh' }" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
                <picker-view-column style="text-align: center;">
                    <view :style="{ 'line-height': stylePx }" class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
                </picker-view-column>
                <picker-view-column style="text-align: center;">
                    <view :style="{ 'line-height': stylePx }" class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
                </picker-view-column>
                <picker-view-column style="text-align: center;">
                    <view :style="{ 'line-height': stylePx }" class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
                </picker-view-column>
            </picker-view>
        </view>
        <view class="" v-if="!isDatePicker">
            <picker-view :style="{ height: popHeight - 10 + 'vh' }" :indicator-style="indicatorStyle" :value="timeValue" @change="bindTimeChange">
                <picker-view-column style="text-align: center;">
                    <view :style="{ 'line-height': stylePx }" class="item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
                </picker-view-column>
                <picker-view-column style="text-align: center;">
                    <view :style="{ 'line-height': stylePx }" class="item" v-for="(item, index) in minutes" :key="index">{{ item }}分</view>
                </picker-view-column>
            </picker-view>
        </view>
        <view class="" style="display: flex;justify-content: center;align-items: center;height: 10vh;">
            <view
                @click.stop="cancelTimePop"
                class=""
                style="width: 33%;height: 90rpx;line-height: 90rpx;text-align: center;background-color: #dedede;color: #05b158;border-radius: 10rpx;margin-right: 40rpx;"
            >
                取消
            </view>
            <view
                @click.stop="confirmTimePop"
                class=""
                style="width: 33%;height: 90rpx;line-height: 90rpx;text-align: center;background-color: #05b158;color: #ffffff;border-radius: 10rpx;"
            >
                确定
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'kingPopup',
    components: {},
    props: {
        // picker的高度
        popHeight: {
            type: Number,
            default: 50
        },
        // 是年月日还是时分选择
        isDatePicker: {
            type: Boolean,
            default: true
        },
        kYear: {
            type: Number,
            default: 0
        },
        kMonth: {
            type: Number,
            default: 0
        },
        kDay: {
            type: Number,
            default: 24
        },
        kHour: {
            type: Number,
            default: 0
        },
        kMin: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            // 时分选择
            hours: [],
            minutes: [],
            timeValue: [],
            newHM: null,
            // 日期选择
            newYMD: null,
            years: [],
            months: [],
            days: [],
            stylePx: `${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px`,
            value: [],
            indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`
        };
    },
    created() {
    },
    methods: {
        // 年月日选择
        getDateTime() {
            const date = new Date();
            const years = [];
            const months = [];
            const days = [];
            for (let i = 1990; i <= date.getFullYear(); i++) {
                years.push(i);
            }
            for (let i = 1; i <= 12; i++) {
                months.push(i);
            }
            for (let i = 1; i <= 31; i++) {
                days.push(i);
            }
            this.years = years;
            this.months = months;
            this.days = days;
            // 如果父组件有传年月日
            if (this.kYear != 0) {
                this.$nextTick(() => {
                    this.value = [9999, this.kMonth - 1, this.kDay - 1];
                });
            } else {
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                this.$nextTick(() => {
                    this.value = [9999, month - 1, day - 1];
                });
            }
        },
        // 时分选择器
        getTime() {
            const date = new Date();
            this.hours = [];
            this.minutes = [];
            const h = [];
            const m = [];
            for (let i = 1; i <= 24; i++) {
                h.push(i);
            }
            for (let i = 1; i <= 60; i++) {
                m.push(i);
            }
            this.hours = h;
            this.minutes = m;
            if (this.kHour != 0) {
                this.$nextTick(() => {
                    this.timeValue = [this.kHour - 1, this.kMin - 1];
                }); 
            } else {
                const hour = date.getHours();
                const minute = date.getMinutes();
                this.$nextTick(() => {
                    this.timeValue = [hour - 1, minute - 1];
                });
            }
        },
        // 点击确定
        confirmTimePop() {
            if (this.isDatePicker) {
                this.$emit('confirmTimePop', this.newYMD);
            } else {
                this.$emit('confirmTimePop', this.newHM);
            }
        },
        // 点击取消
        cancelTimePop() {
            this.$emit('cancelTimePop', 1);
        },
        // 年月日选择改变
        bindChange: function(e) {
            const val = e.detail.value;
            let newValue = [this.years[val[0]], this.months[val[1]], this.days[val[2]]];
            this.newYMD = newValue;
        },
        // 时分改变
        bindTimeChange: function(e) {
            const val = e.detail.value;
            let newValue = [this.hours[val[0]], this.minutes[val[1]]];
            this.newHM = newValue;
        }
    }
};
</script>

<style lang="scss"></style>

写在最后

创作不易，好用请点个赞吧！