单独页面使用分页
<template>
<view>
<view v-for="(item, index) in list" :key="index">
{{ item.title }}
</view>
<view @click="loadMore">加载更多</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [],
pageNum: 1,//第几页
pageSize: 10,//每页几条
hasMore: true,
};
},
//页面上拉方法
onReachBottom() {
if (this.hasMore) {
this.loadMore();
}
},
methods: {
pageInit(page) {
try {
const res = await this.$http.get('your-api-endpoint', {
params: { pageNum: this.pageNum, pageSize: this.pageSize },
});
this.total = res.data.data.length
if (this.total < (this.pageSize * this.pageNum)) {
this.hasMore = false;
}
//信息加载到list中
if (page === 1) {
this.list = res.data.data;
} else {
this.list = [...this.list, ...res.data.data];
}
} catch (error) {
console.error('Error fetching data:', error);
}
},
loadMore() {
if (this.hasMore) {
this.pageNum += 1;
this.pageInit(this.page);
}
},
},
};
</script>
用组件页面上拉,用以上方法会失效
需要用到父页面和组件页面
父页面
onReachBottom(){
uni.$emit('onReachBottom');
},
组件页面,上拉方法需要更换,别的与单页面一致
created(){
uni.$on('onReachBottom', () => {
if (this.hasMore) {
this.loadMore();
}
});
},
beforeDestroy(){
uni.$off('onReachBottom');
},