uniapp scroll-view 回到顶部

最新推荐文章于 2024-09-10 12:33:45 发布

棕色小马龙

最新推荐文章于 2024-09-10 12:33:45 发布

阅读量2.8k

点赞数 4

分类专栏： uniapp 文章标签： html css

原文链接：https://blog.csdn.net/qq_38998250/article/details/108663438

版权

uniapp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细讲解了在Vue项目中使用scroll-view组件时，如何正确设置scroll-top属性并解决其失效问题。通过实例演示了如何配合@scroll事件记录滚动位置，并在视图渲染结束后重置scrollTop。

摘要由CSDN通过智能技术生成

点击tab切换时，我们希望列表从顶部开始scroll-view 提供了scroll-top属性
在这里插入图片描述
scroll-top设置
只是设置scroll-top时不好使的，这里需要注意@scroll 方法

//template
<scroll-view 
	:scroll-top="scrollTop" 
	scroll-y="true" 
	class="scroll-Y" 
     @scroll="scroll"
 >
     <view>滚动区域</view>     
 </scroll-view>

// script

export default {
    data() {
        return {
            scrollTop: 0,
            oldScrollTop:0
        }
    },
    methods: {
        scroll (e) {
            //记录scroll  位置
            this.oldScrollTop = e.detail.scrollTop
        },
        goTop (e) {
            //视图会发生重新渲染
            this.scrollTop = this.oldScrollTop
            //当视图渲染结束 重新设置为0
            this.$nextTick(() =>{
                this.scrollTop = 0
            });
            uni.showToast({
                icon:"none",
                title:"纵向滚动 scrollTop 值已被修改为 0"
            })
        }
    }
}