uniapp怎么回到顶部
时间: 2023-10-08 20:13:51 浏览: 90
基于uniapp的多tab滚动吸顶效果
在 UniApp 中,可以通过以下两种方法将页面滚动到顶部:
1. 使用 `uni-page-scroll-to` 组件:在你的页面中添加一个按钮或其他触发事件的元素,然后使用 `uni-page-scroll-to` 组件来滚动到页面顶部。例如:
```html
<template>
<view>
<!-- 滚动到顶部按钮 -->
<button @click="scrollToTop">回到顶部</button>
<!-- 页面内容 -->
<!-- ... -->
</view>
</template>
<script>
export default {
methods: {
scrollToTop() {
uni.pageScrollTo({
scrollTop: 0,
duration: 300 // 可选,滚动动画的时长,默认值为300ms
})
}
}
}
</script>
```
2. 使用 `uni.createSelectorQuery` API:通过创建一个选择器查询来获取页面的滚动高度,并使用 `uni.pageScrollTo` 方法滚动到顶部。例如:
```html
<template>
<view>
<!-- 滚动到顶部按钮 -->
<button @click="scrollToTop">回到顶部</button>
<!-- 页面内容 -->
<!-- ... -->
</view>
</template>
<script>
export default {
methods: {
scrollToTop() {
uni.createSelectorQuery()
.selectViewport()
.scrollOffset(res => {
uni.pageScrollTo({
scrollTop: res.scrollTop,
duration: 300 // 可选,滚动动画的时长,默认值为300ms
})
})
.exec()
}
}
}
</script>
```
以上两种方法都可以将页面滚动到顶部,你可以根据具体需求选择适合你的方法来实现。
阅读全文