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

最新推荐文章于 2025-05-17 17:07:22 发布

码农中的小菜鸡

最新推荐文章于 2025-05-17 17:07:22 发布

阅读量759

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/oldolder/article/details/132907803

版权

文章讨论了在uniapp中使用scroll-top组件时遇到的问题，即设置scroll-top为0无法多次生效。官方解释了原因并提供了监听scroll事件记录滚动位置的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用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
            });
        }
    }
}