uniapp scroll-view scroll-top设置无效

根据需求,切换到 scroll-view 滚动区域时 滚动条回到顶部,初步尝试在切换的时候设置 this.scrollTop = 0,发现无效,一番查证:

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

解决如下:

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

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="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
            });
        }
    }
}

2. 避免设置一样的值

export default {
    data() {
        return {
            scrollTop: -1
        }
    },
    methods: {
        goTop: function(e) {
           this.scrollTop = 0
        }
    }
}

你可能感兴趣的:(uniapp)