uniapp 选项卡动态切换更新数据问题

业务场景:
选项卡a,b,c
下面的 scrollor 滑动块
点击a 给循环变量data赋值a数组
点击b 给循环变量data赋值b数组

以上场景比如点击表情包,下面的表情内容会改变,而且表情是左右可以滑动的,像qq或者微信那样。此类场景经常有新手遇到所以特此提供解决方案以便大家避坑

出现的问题:
当选项卡在a处,表情内容滑动到第二个view。
点击选项卡b,表情内容还是在第二个view。正常是回到第一个view。

问题原因:
组件属性设置不生效

粗线画重点

当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化

监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值


export default {
    data() {
        return {
            scrollTop: 0,
            old: {
                scrollTop: 0
            }
        }
    },
    methods: {
        scroll: function(e) {
            this.old.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) {
            this.scrollTop = this.old.scrollTop
            this.$nextTick(function() {
                this.scrollTop = 0
            });
        }
    }
}

监听scroll事件,获取组件内部变化的值,实时更新其绑定值


export default {
    data() {
        return {
            scrollTop: 0,
        }
    },
    methods: {
        scroll: function(e) {
            // 如果使用此方法,请自行增加防抖处理
            this.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) {
            this.scrollTop = 0
        }
    }
}

第二种解决方式在某些组件可能造成抖动,推荐第一种解决方式。

你可能感兴趣的:(vue,uni)