在Uni-app中实现下拉加载数据，分页操作减少渲染时间！！

在Uni-app中实现下拉加载数据，分页操作减少渲染时间！！

文章目录

• 1 实例部分
• 2 js部分
  • 2.1 数据部分及引入组件
  • 2.2 方法部分
  • 2.3 onload方法
  • 2.4 触底加载数据分页
  • 2.5 下拉刷新部分

实例部分

设计思想：

• 需要有一个供数据循环渲染的组件，可以根据自己项目的需求，自己进行编写，例如下面的plan就是我自己写的组件，需要传递Form数据；
• 可以有一个底部的统计显示部分；
• 最后根据数据的长度显示是否到底；

<template>
	<view>	
		<!-- 数据显示 -->
		<view class="list-container">
			<plan v-for="item in dataListItem" :key="item.id" :Form="item"  @delete="showConfirmDialog">a</plan>
		</view>
		<view>
			<text>共<text style="color: #4CD964;">{{dataList.length}}</text></text>
		</view>
		<!-- 显示是否到底 -->
		<view class="end-line" v-if="isEnd">
			<text>- 已显示全部 -</text>
		</view>
	</view>	
</template>

js部分

数据部分及引入组件

import Plan from '@/components/plan.vue';
	export default{
		components: {
			Plan
		},
		data() {
			return {
			    id: '',
				totalPage: [], // 所有页面的数据
				pageNum: 1,// 共几页
				dataList: [], // 总数据
				dataListItem: [], // 当前页数据
				currentPage: 0, // 分页 - 当前页
				limit: 10, // 分页 - 每页条目数量
				isEnd: false, // 分页 - 是否到底
			}
		}

---

方法部分

思路：

• 有一个getPlanList()方法用来获取列表，至于方法里的this.$getFromServer(‘PlanList’,params)，因人而异，其实就是获取数据的接口实现代码，可以根据自己的实际项目进行替换和修改。
• setCurrentPageData()：设置第一页数据，同时分配数据到每一页，根据每页显示数量 将后台的数据分割到 每一页
• initList()：初始化页面列表，根据定义好的数据currentPage显示数据

methods: {
			// 获取列表
			getPlanList(options) {
				return new Promise((resolve, reject) => {
					let params = {}
					if (options) params.id = options;
					this.$getFromServer('PlanList',params)
					.then(res => {
						uni.hideLoading()
						if (this.$parseStatusCode(res.data.code)) {
							this.dataList = res.data.content.details
							let limitNum = this.limit
							resolve({
								// 计算一共有几页，计算得0时设置为1
								pageNum: Math.ceil(res.data.content.details.length / limitNum) || 1														
							});							
						} else {
							reject(false);
						}				
					})
					.catch(err => {
						console.log(err) 
						reject(false);
					})					
				});
			},
			// 设置第一页数据，同时分配数据到每一页
			setCurrentPageData() {
				for (let i = 0; i < this.pageNum; i++) {
					// 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
					// 根据每页显示数量 将后台的数据分割到 每一页
					this.totalPage[i] = this.dataList.slice(this.limit * i, this.limit * (i + 1))
				}
			    // 获取到数据后显示第一页内容
				this.dataListItem = this.totalPage[this.currentPage];
				uni.hideLoading()
			},
			// 初始化列表
			initList() {
				uni.showLoading({
					title: '获取记录中'
				})
				this.isEnd = false
				this.getPlanList(this.Id)
				.then(res => {
					this.pageNum = res.pageNum
					this.setCurrentPageData()
					uni.hideLoading()
				})
				.catch(err => {
					console.log(err);
					uni.hideLoading()
				});
			}
		}

onload方法

页面加载，调用this.initList()初始化列表

onLoad(option) {
			this.Id = option.id
			this.initList()
	    }

---

触底加载数据分页

追加数据到数据显示列表里供组件渲染。

// 触底加载分页
		onReachBottom() {
			if (this.isEnd) return
			if (this.currentPage === this.pageNum - 1) {
				this.isEnd = true
				return;
			}
			this.dataListItem = this.dataListItem.concat(this.totalPage[++this.currentPage])
		}

---

下拉刷新部分

下拉刷新列表

// 下拉刷新
		onPullDownRefresh() {
			this.initList()
			uni.stopPullDownRefresh()
		}

如果有写错或者不足的地方，还请在评论区指正！！我会及时修改！！！！！！

请尊重原创，如需转载，还请注明原作者，原文链接，谢谢啦！！！