记录一次scroll-view组件设置scroll-top 0 无效

在使用uniapp的scroll-top组件时,滚动到底部切换其他类型时,设置scroll-top为0,发现只有第一次切换能够成功回到顶部, 之后每次切换设置的scroll-top 没有效果。

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

对此,官方也给出了解决方案:
监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值

<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>
export default {
    
    
    data() {
    
    
        return {
    
    
            scrollTop: 0,
            old: {
    
    
                scrollTop: 0
            }
        }
    },
    methods: {
    
    
    	// 滚动时,记录一下滚动位置
        scroll: function(e) {
    
    
            this.old.scrollTop = e.detail.scrollTop
        },
        // 先把滚动位置赋值给scroll-top,再把scroll-top的值设置为0
        goTop: function(e) {
    
    
            this.scrollTop = this.old.scrollTop
            this.$nextTick(function() {
    
    
                this.scrollTop = 0
            });
        }
    }
}

官方还提供了另一种方法,但是还需要自己特别处理,因此不做推荐,感兴趣的可以看下官网说法

猜你喜欢

转载自blog.csdn.net/oldolder/article/details/132907803