前端 请求数据过大导致页面加载时间过长

 此代码用于前端请求后端数据过多，而导致页面加载时间过长，影响用户的体验与用户的操作 

 代码基于uniapp 的触底函数的操作 

 网页端需要 监听滚动条 或者 获取dom 加载的长度来与之代码配合处理

效果图

前端 请求数据过大导致页面加载时间过长

1. 创建 lazyFun.js

export default function lazyFun(listData, pageNum, pageSize) {
  console.log(listData, pageNum, pageSize)

  if (listData && listData.length > 0) {


    //向下取整  获取可以分多少页
    let index = Math.floor(listData.length / pageSize)
    console.log(index)
    // 获取拆分后的余数
    let key = listData.length % pageSize

    console.log(key)
    // 页码判断

    //index 小于1  只有一页
    if (index < 1) return listData
    //当选择的分页 大于数据分页时候 null
    if (index < pageNum) return null

    // 获取页码 小于分页的页码
    if (index >= pageNum) {


      //判断 pageNum
      if (pageNum === 1) return listData.slice(0, (pageSize * pageNum + key))
      // 当pageNum >1 时候 获取上一次截取的下标
      if (pageNum > 1) return listData.slice((pageSize * (pageNum - 1) + key), (pageSize * pageNum + key))
    }


  } else return [] // 当数据小0 直接甩出[]
}

2.  引入 

import lazyFun from './lazyFun.js';

3. 执行示例

<template>
	<view class="content">
		<div v-for="(item, index) in dataList" :key="index">
			<image class="logo" src="/static/logo.png"></image>
			<view class="text-area">
				<text class="title">{{ item.label }}</text>
			</view>
		</div>
	</view>
</template>

<script>
import lazyFun from './lazyFun.js';
export default {
	data() {
		return {
			title: 'Hello',

			listData: [],
			pageNum: 1,
			pageSize:5,
			dataList: []
		};
	},
	onLoad() {},
	//触底函数
	onReachBottom() {
		this.pageNum++;
		this.dataList = this.dataList.concat(lazyFun(this.listData, this.pageNum, this.pageSize));
	},
	onShow() {
		this.listData = [
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			},
			{
				label: '会议'
			}
		];
		this.dataList = this.dataList.concat(lazyFun(this.listData, this.pageNum, this.pageSize));
	},

	methods: {}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>