uniapp触底加载
时间: 2023-10-05 16:14:36 浏览: 86
在Uniapp中实现触底加载的功能,可以按照以下步骤进行操作:
1. 在需要实现触底加载的页面组件中,使用一个滚动容器包裹需要加载的内容。
2. 给滚动容器设置一个固定高度,可以通过设置CSS类的方式来实现,例如 ".scrollHeight { max-height: 100vh; }"。
3. 在methods方法中定义一个函数,用于处理触底加载的业务逻辑。可以命名为lowerBottom()。
4. 在lowerBottom()函数中,可以通过监听滚动容器的滚动事件,判断滚动的位置是否到达底部。
5. 当滚动到底部时,执行需要的操作,例如请求服务器加载更多的数据。
6. 在lowerBottom()函数中,也可以通过$emit方法来触发一个自定义事件,通知其他组件需要进行加载动画的显示与隐藏。
代码示例:
```
<template>
<div class="scrollHeight" @scroll="lowerBottom">
<!-- 加载的内容 -->
</div>
</template>
<script>
export default {
methods: {
lowerBottom() {
const scrollTop = this.$refs.scrollHeight.scrollTop;
const scrollHeight = this.$refs.scrollHeight.scrollHeight;
const clientHeight = this.$refs.scrollHeight.clientHeight;
if (scrollTop + clientHeight >= scrollHeight) {
// 执行触底加载的业务逻辑
console.log("触底加载");
// 请求服务器加载更多的数据
// 触发加载动画的显示与隐藏事件
this.$emit("aaa", 0); // 加载动画出现
setTimeout(() => {
this.$emit("aaa", 1); // 加载动画消失
}, 3000);
}
},
},
};
</script>
<style scoped>
.scrollHeight {
max-height: 100vh;
}
</style>
```