Vue长列表优化专题(一)

虚拟滚动


先看一下mockjs语法：

参考：
mockjs介绍
mock.js官方示例

先上服务端源码：

// 使用mock构建本地服务器输出数据结果
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,
      // 模拟标题 中文字符串长度为15-25位
      'title': '@ctitle(15,25)',
      // 模拟图片索引 自然数从0到15
      'image': '@natural(0,15)',
      // 模拟到访人数 自然数从0-9999
      'reads': '@natural(0,9999)',
      // 模拟新闻来源 中文字符串长度为3-10位
      '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) {
  // 获取get请求数据条数参数num
  const { num } = req.query
  return res.send(generatorList(num))
})

// 设置端口
const server = app.listen(9999, function () {
  console.log('Local mock service activated! Running at http://localhost:9999/data?num=')
})

我们把项目跑起来：

在浏览器中输入地址，num给20试试：