uniapp将页面滚动到目标位置_uniapp scrollview滚动到指定位置

uniapp将页面滚动到目标位置/返回顶部

这里分享其中两种方式，仅供参考~

方式一：使用 pageScrollTo

backToTop() {
    uni.pageScrollTo({
        scrollTop: 0, // 滚动到页面的目标位置（单位px）
        duration: 300 // 滚动动画的时长，默认300ms，单位 ms
    });
}
1
2
3
4
5
6

方式二：使用 scroll-view

注意： 如果页面需要 下拉刷新 交互，此方式不适合。详情请看

<scroll-view scroll-y="true" :show-scrollbar="false" :scroll-with-animation = "true" :scroll-top="scrollTop" @scroll="scrollTap">
    <view>
    	......
    </view>
</scroll-view>
1
2
3
4
5

<script>
	export default {
		data() {
			return {
                scrollTop: 0,
            }
        },
        methods: {
            /**
             * 滚动时触发事件
             */
            scrollTap(e) {
				this.currentScrollTop = e.detail.scrollTop;
			},
			backToTop() {
				this.scrollTop = this.currentScrollTop;
                
                // 在下次 DOM 更新循环结束之后 重置下
				this.$nextTick(() => {
					this.scrollTop = 0;
				})
			}
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25