在UniApp中，onReachBottom 和 onPullDownRefresh 是两个重要的生命周期函数，分别用于处理页面滚动到底部时触发的事件和下拉刷新时触发的事件。
- 在页面的 .vue 文件中：
<template> <view> <scroll-view scroll-y="true" @scrolltolower="onReachBottom" style="height: 100vh;" > <view v-for="(item, index) in list" :key="index"> {{ item }} </view> <!-- 用于加载更多的占位符，可根据需要自定义样式 --> <view v-if="isLoading" class="loading-more">加载中...</view> </scroll-view> </view>
</template> <script>
export default { data() { return { list: [], // 列表数据 page: 1, // 当前页码 pageSize: 10, // 每页数据条数 isLoading: false, // 是否正在加载数据 }; }, onLoad() { this.fetchData(); // 页面加载时获取初始数据 }, methods: { fetchData() { // 假设 fetchDataFromServer 是你从服务器获取数据的函数 this.isLoading = true; // 开始加载数据时设置标志位 fetchDataFromServer(this.page, this.pageSize).then(data => { this.list = this.list.concat(data); // 合并新数据到列表 this.page += 1; // 页码自增 this.isLoading = false; // 数据加载完成，设置标志位为 false }).catch(error => { console.error('加载数据失败', error); this.isLoading = false; // 加载失败也设置标志位为 false }); }, onReachBottom() { // 滚动到底部时触发，如果不在加载中，则继续加载数据 if (!this.isLoading) { this.fetchData(); } }, onPullDownRefresh() { // 下拉刷新时触发 this.page = 1; // 重置页码为第一页 this.list = []; // 清空列表数据 this.fetchData(); // 重新获取数据 }, }, onUnload() { // 页面卸载时，确保停止任何可能还在进行的异步操作 this.isLoading = false; },
};
</script> <style>
.loading-more { text-align: center; padding: 20rpx;
}
</style>
- 在页面的 pages.json 配置文件中：
{ "navigationBarTitleText": "我的list列表", "enablePullDownRefresh": true // 开启下拉刷新
}
自学东西，才过的坑。
唯有美景，才能抚慰我的心灵！
