【uniapp】带分页列表请求

最新推荐文章于 2025-05-27 10:30:36 发布

原创最新推荐文章于 2025-05-27 10:30:36 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

<script>
	export default {
		data() {
			return {
				queryParams: {
					total: 0,
					pageNum: 1,
					pageSize: 5,
				},
				// 数据列表
				newsList: [],
			}
		},
		onLoad() {

		},
		methods: {
			//上拉加载
			onReachBottom() {
				let curTotal = this.newsList.length;
				let total = this.queryParams.total;
				if (curTotal < total) {
					this.queryParams.pageNum += 1;
					this.getListInfo();
				} else {
					this.utils.alert('已经到底啦')
				}
			},
			// 下拉刷新,初始化第一页数据
			onPullDownRefresh() {
				// 重置数据
				this.newsList = [];
				this.queryParams.total = 0;
				this.queryParams.pageNum = 1;
				this.getListInfo();
			},
			getListInfo() {
				let that = this
				that.utils.Request({//封装的请求方法，此处请求方法实际应用中使用自己封装或官方提供方法
					api: '/api/WapApi/GetResultList',
					param: {
						page: that.queryParams.pageNum,
						rows: that.queryParams.pageSize,
						F_Phone: phoneNumber,
					},
					// token: true,
					loading: '数据加载中...',
					method: 'GET',
					fn: (type, data, res) => {
						if (type === 'complete') {
                            //分页数据加载逻辑
							let returnData = res
							let total = returnData.count
							that.queryParams.total = returnData.count;
							if (that.newsList.length < total) {
								if (returnData.data != null && returnData.data.length > 0) {
									that.newsList = that.newsList.concat(returnData.data);
								}
							}
						}
					}
				});
			},
		}
	}
</script>