uniapp滚动分页

傷城~ 2022-12-23 12:28 129阅读 0赞

<template>
    	<view>
    		<view v-for="(item,index) in list" :key="index"></view>
    		<view class="loadingText">{
       {loadingText}}</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				list: []
    				page: 1,
    				loadingText: '上拉显示更多'
    			}
    		},
    		onLoad(options) {
    			this.getList()
    		},
    		onPullDownRefresh() {
    			this.page = 1
    			this.getList()
    		},
    		onReachBottom() {
    			this.getMoreList();
    		},
    		methods: {
    			getList() {
    				this.$agreementApi.getList(this.page, this.pageSize).then(res => {
    					if (res.code == 0) {
    						this.list = res.data.data;
    						uni.stopPullDownRefresh()
    						this.page++
    					}
    				});
    			},
    			getMoreList() {
    				this.loadingText = '-- 正在加载 --'
    				this.$agreementApi.getList(this.page, this.pageSize).then(res => {
    					if (res.code == 0) {
    						if (res.data.data.length == 0 || res.data.data == null) {
    							this.loadingText = '-- 暂无更多 --'
    							return false;
    						}
    						var newlist = res.data.data;
    						this.list = this.list.concat(newlist)
    						this.page++
    					}
    				});
    			},
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.loadingText {
    		padding: 20rpx 0 40rpx 0;
    		text-align: center;
    		color: #310D05;
    		font-size: 28rpx;
    	}
    </style>

另一种实现方式，要后台接口返回是否是最后一页；

onReachBottom() {//页面触底时
    	if (this.isBottom) {
    		this.info();
    	}
    },
    methods: {
    	info() {
    		// 请求后台接口。。。
    		if (res.status == 200) {
    			if (res.data.length == 0) {
    				this.list = [];
    			}
    			if (res.isLastPage) { //如果是最后一页，则不再请求接口
    				this.isBottom = false;
    			} else {
    				this.pageNum++;
    			}
    			if (res.data.length > 0) {
    				this.list = this.list.concat(res.data);
    			}
    		}
    	}
    }