z***@qq.com
z***@qq.com
  • 发布:2022-02-08 09:14
  • 更新:2022-02-08 11:49
  • 阅读:600

【报Bug】3.3.9 和3.3.10 picker-view 页面显示错位

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10.15

HBuilderX类型: 正式

HBuilderX版本号: 3.3.10

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: x10

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="date-picker">  
        <picker-view class="date-picker-box" :indicator-style="indicatorStyle" :value="value" @change="bindChange">  
            <picker-view-column>  
                <view class="date-picker-item" v-for="(a, i) in years" :key="i">  
                    <text :class="{ ac: a === year }">{{ a }}年</text>  
                </view>  
            </picker-view-column>  
            <picker-view-column>  
                <view class="date-picker-item" v-for="(a, i) in months" :key="i">  
                    <text :class="{ ac: a === month }">{{ a }}月</text>  
                </view>  
            </picker-view-column>  
            <picker-view-column>  
                <view class="date-picker-item" v-for="(a, i) in days" :key="i">  
                    <text :class="{ ac: a === day }">{{ a }}日</text>  
                </view>  
            </picker-view-column>  
        </picker-view>  
        <view class="d-r d-sb px-8">  
            <a-button class="m-3" sm text="重置" @click="clean" plain />  
            <a-button class="m-3" sm text="取消" @click="$emit('close')" plain />  
            <a-button class="m-3" sm text="确认" @click="submit" />  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    name: 'datePicker',  
    model: { event: 'change', prop: 'date' },  
    props: { date: String },  
    data() {  
        const s = new Date().getFullYear() - 10;  
        const now = this.date ? new Date(this.date) : new Date();  
        const years = [];  
        const months = [];  
        const days = [];  
        for (let i = s; i <= s + 20; i++) years.push(i);  
        for (let i = 1; i <= 12; i++) months.push(i);  
        const year = now.getFullYear();  
        const month = now.getMonth() + 1;  
        const day = now.getDate();  
        const value = [year - s, month - 1, day - 1];  
        const indicatorStyle = `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`;  
        return { years, months, days, year, month, day, value, indicatorStyle };  
    },  
    watch: {  
        month: {  
            handler(val) {  
                if (val < 8) {  
                    if (val % 2 !== 0) {  
                        this.days = [];  
                        for (let i = 1; i <= 31; i++) this.days.push(i);  
                    } else {  
                        this.days = [];  
                        for (let i = 1; i <= 30; i++) this.days.push(i);  
                    }  
                }  
                if (val > 7) {  
                    if (val % 2 === 0) {  
                        this.days = [];  
                        for (let i = 1; i <= 31; i++) this.days.push(i);  
                    } else {  
                        this.days = [];  
                        for (let i = 1; i <= 30; i++) this.days.push(i);  
                    }  
                }  
                if (val === 2) {  
                    if (this.year % 4 === 0) {  
                        this.days = [];  
                        for (let i = 1; i <= 29; i++) this.days.push(i);  
                    } else {  
                        this.days = [];  
                        for (let i = 1; i <= 28; i++) this.days.push(i);  
                    }  
                }  
            },  
            deep: true,  
            immediate: true  
        },  
        year: {  
            handler(val) {  
                if (val % 4 === 0) {  
                    if (this.month === 2) {  
                        this.days = [];  
                        for (let i = 1; i <= 29; i++) this.days.push(i);  
                    }  
                } else {  
                    if (this.month === 2) {  
                        this.days = [];  
                        for (let i = 1; i <= 28; i++) this.days.push(i);  
                    }  
                }  
            }  
        },  
        deep: true,  
        immediate: true  
    },  
    methods: {  
        clean() {  
            this.$emit('change', '');  
            this.$emit('success', '');  
        },  
        submit() {  
            const date = this.year + '-' + (this.month > 9 ? this.month : '0' + this.month) + '-' + (this.day > 9 ? this.day : '0' + this.day);  
            this.$emit('change', date);  
            this.$emit('success', date);  
        },  
        bindChange({ detail }) {  
            const val = detail.value;  
            this.year = this.years[val[0]];  
            this.month = this.months[val[1]];  
            this.day = this.days[val[2]];  
        }  
    }  
};  
</script>  

<style lang="scss">  
.date-picker {  
    width: 600rpx;  
    height: 650rpx;  
    background-color: $bg-color;  
    padding-top: $spacing-lg;  
    &-box {  
        width: 600rpx;  
        height: 520rpx;  
        padding: 0 20rpx;  
        background-color: #fff;  
    }  

    &-item {  
        height: 100rpx;  
        justify-content: center;  
        align-items: center;  
        .ac {  
            color: red;  
        }  
    }  
}  
</style>  

操作步骤:

运行上面的代码

预期结果:

正常显示

实际结果:

错位

bug描述:

3.3.9开始 picker-view 页面显示错位

3.3.5正常显示

2022-02-08 09:14 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

打包机已修复此问题,重新在线打包即可。

  • z***@qq.com (作者)

    ios 还是有问题

    2022-03-08 13:36

  • DCloud_UNI_GSQ

    回复 z***@qq.com: 哪个版本?截图看下

    2022-03-08 14:49

该问题目前已经被锁定, 无法添加新回复