树形列表翻页，后端： 搞不了搞不了～～

背景

记得几年前做了一个报告，报告里面加载的是用户的历年作品还有会员信息，然后按照年月倒序展示出来，其中历年作品都要将作品的封面展示出来。一开始这个报告到没啥问题，而且一个时间轴下来感觉挺好，有用户的作品、会员记录、关注以及粉丝记录很全面。直到最近忽然有一批用户说一进到这个报告页面就卡住不动了，上去一查发现不得了，都是铁杆用户，每年作品都几百个，导致几年下来，这个报告返回了几千个作品，包含上千的图片。

问题分析

上千的图片，肯定会卡，首先想到的是做图片懒加载。这个很简单，使用一个vue的全局指令就可以了。但是上线发现，没啥用，dom节点多的时候，懒加载也卡。

然后就问服务端能不能支持分页，服务端说数据太散，连表太多，树形结构很难做分页。光查询出来就已经很费劲了。

没办法于是想了一下如何前端来处理掉。

思路

实现

本文仅展示一种基于vue的实现

1. 容器

设计一个可以进行滚动翻页的容器 然后绑定滚动方法OnPageScrolling

<style lang="less" scoped>


.study-backup {


overflow-x: hidden;


overflow-y: auto;


-webkit-overflow-scrolling: touch;

width: 100%;

height: 100%;

position: relative;


min-height: 100vh;

background: #f5f8fb;


box-sizing: border-box;


}


</style>

<template>

<section class="report" @scroll="OnPageScrolling($event)">

</section>

</template>

2.初始化数据

这里定义一下树形列表的数据结构，实现初始化渲染，可以渲染一个树节点，或者一个树节点的部分子节点

GetTreeData() {


treeapi


.GetTreeData({ ... })


.then((result) => {

// 处理结果

const data = Handle(result)

// 这里备份一份数据 不参与展示

this.backTreeList = data.map((item) => {

return {

id: item.id,

children: item.children


}


})

// 这里可以初始化为第一个树节点

const nextTree = this.backTreeList[0]

const nextTansformTree = nextTree.children.splice(0)

this.treeList = [{

id: nextTree.id,

children: nextTansformTree


}]

// 这里可以初始化为第一树节点 但是只渲染第一个子节点

const nextTree = this.backTreeList[0]

const nextTansformTree = nextTree.children.splice(0, 1)

this.treeList = [{

id: nextTree.id,

children: nextTansformTree


}]


})


},

3.滚动加载

这里通过不断的把 backTreeList 的子节点转存入 treeList来实现分页加载。

OnPageScrolling(event) {

const container = event.target

const scrollTop = container.scrollTop

const scrollHeight = container.scrollHeight

const clientHeight = container.clientHeight

// console.log(scrollTop, clientHeight, scrollHeight)

// 判断是否接近底部

if (scrollTop + clientHeight >= scrollHeight - 10) {

// 执行滚动到底部的操作

const currentReport = this.backTreeList[this.treeList.length - 1]

// 检测匹配的当前树节点 treeList的长度作为游标定位

if (currentReport) {

// 判断当前节点的子节点是否还存在 如果存在则转移到渲染树中

if (currentReport.children.length > 0) {

const transformMonth = currentReport.children.splice(0, 1)

this.treeList[this.treeList.length - 1].children.push(


transformMonth[0]


)

// 如果不存在 则寻找下一树节点进行复制 同时复制下一节点的第一个子节点 当然如果寻找不到下一树节点则终止翻页


} else if (this.treeList.length < this.backTreeList.length) {

const nextTree = this.backTreeList[this.treeList.length]

const nextTansformTree = nextTree.children.splice(0, 1)

this.treeList.push({

id: nextTree.id,

children: nextTansformTree


})


}


}


}


}

4. 逻辑细节

从上面代码可以看到，翻页的操作是树copy的操作，将备份树的子节点转移到渲染树中

扩展思路

这个方法可以进行封装，将每次复制的节点数目和每次复制的子节点数目作为传参，一次可复制多个节点，这里就不做展开