uniapp监听用uni.pageScrollTo滚动到最底部
时间: 2023-12-09 22:05:06 浏览: 176
uni-app 实现聊天页面滚动到最底部
5星 · 资源好评率100%
可以使用uni.createIntersectionObserver方法来判断当前页面是否滚动到了底部,然后再调用uni.pageScrollTo方法将页面滚动到最底部。
具体实现代码如下:
```
<template>
<view>
<!-- 页面内容区域 -->
<view class="content" style="height: 1000px;"></view>
</view>
</template>
<script>
export default {
onReady() {
// 创建一个IntersectionObserver实例
const observer = uni.createIntersectionObserver(this);
// 监听页面滚动到底部
observer.relativeToViewport({ bottom: 0 }).observe('.content', (res) => {
if (res.intersectionRatio > 0) {
// 页面已经滚动到底部,调用uni.pageScrollTo方法将页面滚动到最底部
uni.pageScrollTo({
scrollTop: 10000,
duration: 300,
});
}
});
},
};
</script>
```
上述代码中,我们在页面加载完成后创建了一个IntersectionObserver实例,并通过observe方法监听了页面内容区域的滚动情况。当页面滚动到底部时,我们调用uni.pageScrollTo方法将页面滚动到最底部。需要注意的是,scrollTop的值需要设置一个足够大的值,以确保页面能够滚动到最底部。
阅读全文