4***@qq.com
4***@qq.com
  • 发布:2024-04-03 15:36
  • 更新:2024-04-03 21:28
  • 阅读:421

【报Bug】picker-view 动态修改 picker-view-column 遍历的值,且修改picker-view自身的 value 后,在微信小程序端显示不正确,H5正常

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10 22H2 19045.4170

HBuilderX类型: 正式

HBuilderX版本号: 3.99

第三方开发者工具版本号: 1.06.2402040

基础库版本号: 3.3.4

项目创建方式: HBuilderX

示例代码:
<template>  
    <view>  
        <page-head :title="title"></page-head>  
        <view class="uni-padding-wrap">  
            <view class="uni-title">  
                日期:{{year}}年{{month}}月{{day}}日  
            </view>  
        </view>  
        <picker-view v-if="visible" :indicator-style="indicatorStyle" :mask-style="maskStyle" :value="value"  
            @change="bindChange">  
            <picker-view-column>  
                <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>  
            </picker-view-column>  
            <picker-view-column>  
                <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>  
            </picker-view-column>  
            <picker-view-column>  
                <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>  
            </picker-view-column>  
        </picker-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            const date = new Date()  
            const years = []  
            const year = date.getFullYear()  
            const months = []  
            const month = date.getMonth() + 1  
            const days = []  
            const day = date.getDate()  

            for (let i = 2023; i <= date.getFullYear(); i++) {  
                years.push(i)  
            }  

            for (let i = 4; i <= 12; i++) {  
                months.push(i)  
            }  

            for (let i = 1; i <= 31; i++) {  
                days.push(i)  
            }  
            return {  
                title: 'picker-view',  
                years,  
                year,  
                months,  
                month,  
                days,  
                day,  
                value: [1, 0, day - 1],  
                /**  
                 * 解决动态设置indicator-style不生效的问题  
                 */  
                visible: true,  
                // indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`  
                indicatorStyle: `height: 50px;`,  
                // #ifdef MP-KUAISHOU  
                maskStyle: "padding:10px 0"  
                // #endif  
                // #ifndef MP-KUAISHOU  
                maskStyle: ""  
                // #endif  
            }  
        },  

        watch: {  
            value(newV, oldV) {  
                if (oldV[0] !== newV[0]) { // 改变年  
                    this.months = []  
                    for (let i = 1; i <= 12; i++) {  
                        this.months.push(i)  
                    }  
                    this.value[1] = 9 // 保证月份不变  
                }  
                console.log(this.value);  
            }  
        },  

        methods: {  
            bindChange(e) {  
                this.value = e.detail.value  
            }  
        }  
    }  
</script>  

<style>  
    picker-view {  
        width: 100%;  
        height: 600rpx;  
        margin-top: 20rpx;  
    }  

    .item {  
        line-height: 100rpx;  
        text-align: center;  
    }  
</style>

操作步骤:

注意:2024年的月份是从4月开始的

  1. 将月份调整到 10 月
  2. 切换年份到 2023 年

预期结果:

在微信小程序端,切换 2023 年后应该显示为 10 月

在 H5 端显示正确

实际结果:

在微信小程序端,显示的是 9 月

bug描述:

使用 picker-view 开发自定义的日期选择器

当动态的修改 picker-view-column 内遍历的值,且修改 picker-value 自身的 value 后

在微信小程序端显示错误,H5正常

2024-04-03 15:36 负责人:无 分享
已邀请:
yuhespace

yuhespace - Yule

推测是微信小程序的数据与索引问题
经过我的测试,可以使用这种方法解决

this.$nextTick(()=>{  
    this.value[1] = 9  
})

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

    感谢你的回复,我试了你的方法,并没有复现成功。


    麻烦贴一下全部的代码吧,我这边试试。

    2024-04-03 20:55

  • yuhespace

    回复 4***@qq.com: 在watch那改

    watch: {

    value(newV, oldV) {

    if (oldV[0] !== newV[0]) { // 改变年

    this.months = []

    for (let i = 1; i <= 12; i++) {

    this.months.push(i)

    }

    this.$nextTick(()=>{

    this.value[1] = 9

    })

    }

    console.log(this.value);

    }

    },

    2024-04-03 20:57

yuhespace

yuhespace - Yule

视频,图片不是

4***@qq.com

4***@qq.com (作者)

用了微信小程序原生开发试了下,没有问题

测试用代码片段:

https://developers.weixin.qq.com/s/fPdRjbmz7vQA

4***@qq.com

4***@qq.com (作者)

@yuhespace

感谢你的代码,我试了没成功,还发现了新的bug,你试试这个代码能工作正常么:

        watch: {  
            value(newV, oldV) {  
                console.log(newV, oldV);  

                this.value[1] = 5  

                console.log(this.value);  
            }  
        }

我这边只有第一次是正常的,后续改变月份,对value的改变,无法改变 picker-view 的显示

在 H5 端工作是正常的

在微信小程序原生工作也是正常的:

https://developers.weixin.qq.com/s/lVmnNbms7AQc

  • yuhespace

    我理解没错的话,你这是想让每次你变月份都变成9是吧,因为你的数组一开始从4开始,你加了$nextTick不就行了吗,看我上次的视频

    2024-04-03 21:26

  • yuhespace

    回复 yuhespace: 不是上次是上传

    2024-04-03 21:28

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

    回复 yuhespace: 你使用的 HBuilder 版本是多少?我的是 3.99,我感觉咱们代码行为不一致

    2024-04-03 21:29

  • yuhespace

    回复 4***@qq.com: 我是最新版的4.08

    2024-04-03 21:30

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

    回复 yuhespace: 感谢,用 vue3 + 4.08 在小程序端复现了,然后在 H5 下不行。。感受到跨端的恶心了

    2024-04-03 22:41

  • yuhespace

    回复 4***@qq.com: 虚假的跨端.......

    真实的跨端:


        watch: {  
    value(newV, oldV) {
    console.log(newV, oldV);
    // #ifdef MP-WEIXIN
    this.$nextTick(() => {
    this.value[1] = 5
    })
    // #endif

    // #ifdef H5
    this.value[1] = 5
    // #endif
    console.log(this.value);
    }
    },

    哈哈哈哈哈哈哈

    2024-04-03 22:49

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

    回复 yuhespace: 我在 vue2 下使用 this.$nextTick 不生效,这个知道什么原因么?

    2024-04-03 23:07

  • yuhespace

    回复 4***@qq.com: 不应该不生效,我一开始就是2,与2,3无关,它是得DOM更新才会触发

    你检查是否有DOM更新,或者是用 let _this = this 让 _this 代替this

    2024-04-03 23:13

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

    回复 yuhespace: 你可以试试,一模一样的代码,真不行,uniapp编译的时候会按照你说的处理this的


    watch: {  
    value: function value(newV, oldV) {
    var _this = this;
    console.log(newV, oldV);
    this.$nextTick(function () {
    _this.value[1] = 5;
    });
    console.log(this.value);
    }
    },

    2024-04-03 23:30

  • yuhespace

    你看我之前的代码,h5用直接赋值,微信小程序用$nextTick

    2024-04-04 08:32

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

    回复 yuhespace: 我是说在 vue2 下,用 $nextTick 不生效

    2024-04-04 10:21

要回复问题请先登录注册