uniapp将页面滚动到目标位置/返回顶部
这里分享其中两种方式，仅供参考~文章来源：https://www.toymoban.com/news/detail-516707.html
方式一：使用 pageScrollTo
backToTop() {
uni.pageScrollTo({
scrollTop: 0, // 滚动到页面的目标位置（单位px）
duration: 300 // 滚动动画的时长，默认300ms，单位 ms
});
}
方式二：使用 scroll-view
注意： 如果页面需要 下拉刷新 交互，此方式不适合。详情请看文章来源地址https://www.toymoban.com/news/detail-516707.html
<scroll-view scroll-y="true" :show-scrollbar="false" :scroll-with-animation = "true" :scroll-top="scrollTop" @scroll="scrollTap">
<view>
......
</view>
</scroll-view>
<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>
到了这里，关于uniapp将页面滚动到目标位置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
