分类：虚拟列表

2021
03-19

Vue 虚拟列表的实战示例

序言现如今，我们总是在无止境的刷。刷微博、刷抖音、刷沸点......一次次丝滑下拉体验的背后却是前端攻城狮的用心。本篇讨论基于Vue.js的列表无限下拉实践。我们的目标就是：让列表下拉纵享丝滑，而不是像以往的下拉就loading等待的体验。译自BetterProgramming在线Demo设计咱还是用VueCLI来快速构建项目。这是主页面：//EndlessList.vue<template><divclass="endless-scrolling-list"><!--搜索框--><divc... 继续阅读 >

2020
10-08

vue实现虚拟列表功能的代码

当数据量较大(此处设定为10w),而且要用列表的形式展现给用户,如果我们不做处理的话,在浏览器中渲染10wdom节点,是极其耗费时间的,那我的Macbookair举例,10w条数据渲染出来到能看到页面,需要13秒多(实际应该是10秒左右),如果是用户的话肯定是不会等一个网页十几秒的我们可以用虚拟列表解决这个问题一步步来首先看一下效果这是data中的数据data(){return{list:[],//贼大的数组li:{//列表项信息height:50,... 继续阅读 >