虚拟列表（Virturl List）---概念

1.什么是虚拟列表

虚拟列表就是当我们前端请求后端的数据，并且数据量极大且无法使用分页方式的情况下做的一种性能优化的方案，虚拟列表采用的可视区渲染方式优化

掌握虚拟列表有两个重要的概念：

• 可滚动区域：假设有1000条数据，每个列表项的高度是30，那么可滚动的区域的高度就是1000*30。当用户改变列表的滚动条的当前滚动值的时候，会造成可见区域的内容的变更。

• 可见区域：比如列表的高度是300，右侧有纵向滚动条可以滚动，那么视觉可见的区域就是可见区域。

2.虚拟列表的原理

虚拟滚动，就是根据「容器可视区域」的「列表容积数量」，监听用户滑动或者滚动事件，动态截取「长列表数据」中的「部分数据」渲染到页面上，动态使用空白占位填充容器「上下滚动区域内容」，模拟实现「原生滚动效果」。

3.1 mock模拟数据

通过express和mockjs进行后端的模拟

const Mock = require('mockjs')
const express = require('express')
const app = express()

// 传入参数num,生成num 条数据
function generatorList( num ){
  return Mock.mock({
    [`List|${num}`]:[{
      //ID
      'id|+1':1,
      title:'@ctitle(15,25)',
      image:'@natural(0,15)',
      reads:"@natural(0,9999)",
      from:"@ctitle(3,10)",
      date:"@date('yyyy-MM-dd')"
    }]
  })
}
// 跨域
app.all('*',function(req,res,next){
  res.header('Access-Control-Allow-Origin','*')
  res.header('Access-Control-Allow-Methods','PUT,GET,POST,DELETE,OPTIONS')
  res.header('Access-Control-Allow-Headers','X-Requested-With')
  res.header('Access-Control-Allow-Headers','Content-Type')
  next()
})

// 截取路由 反馈数据
app.get("/data",function(req,res){
  const { num } = req.query
  return res.send(generatorList(num))
})

const sever = app.listen(5555,()=>{
  console.log("http://localhost:5555/data?num=请求的数量");
})