vue实现列表,vue实例选项
这篇文章主要介绍了某视频剪辑软件虚拟列表的实现示例，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下
目录
序言
设计
实现
小结
序言
现如今，我们总是在无止境的刷。刷微博、刷抖音、刷沸点.一次次丝滑下拉体验的背后却是前端攻城狮的用心。
本篇讨论基于vue。j的列表无限下拉实践。
我们的目标就是：让列表下拉纵享丝滑，而不是像以往的下拉就装货等待的体验。
译自更好的编程
在线演示
设计
咱还是用Vue CLI来快速构建项目。
这是主页面：
//EndlessList.vue
模板
div class=无尽滚动列表
！-搜索框-
div class=搜索框
输入类型=text v-model=searchQuery/
/div
结果。长度==0！正在加载
开始打字搜索东西。
/p
！-虚拟列表-
虚拟列表
:data-key=pageid
：数据源="结果"
:data-component=itemComponent
:page-mode=true
/
！-正在加载-
loader v-if=loading /
/div
/模板
其中核心当然是虚拟列表组件啦~
这里的虚拟列表，我们用到一个三方库虚拟滚动列表，它在开源代码库上又2.5k的星星。类比于反应的反应虚拟化库。
大量的数字正射影像图元素会使得我们的网页非常"重"。当数字正射影像图元素超过1500 至2000 个的时候，页面就开始又延迟，尤其是在小型的、性能差的设备上尤为明显。
想象一下，有一个无线滚动的页面，你不断的下拉，它实际上可能形成了上万个数字正射影像图元素，每个元素还包含子节点，这样将消耗巨大的性能。
虚拟滚动条正是来解决这个问题的。
如上图，已经表示的很清楚了。列表分为可见区域和缓冲区域，超出这个范围的列表数字正射影像图都将被删除。
好啦，准备工作已就绪，让我们得到它！
实现
//imports.js(EndlessList.vue)
从" axios "导入axios
从"洛达什"导入洛达什；
从"虚拟滚动列表"导入虚拟列表；
从导入搜索结果./搜索结果；
从导入加载程序./Loader ；
导出默认值{
名称： EndlessList ，
组件：{
虚拟艺术家，
装货设备
},
data() {
返回{
搜索查询： ,
当前页面：0,
结果：[],
项目组件：搜索结果，
加载：假
}
},
};
我们引入第三方库爱可信和loadsh，以便后续使用。
其中，项目组件是虚拟列表的属性，为此我们需要新建一个搜索结果子组件，作为搜索结果单元。
代码如下：
//SearchResult.vue
模板
div class=列表项
h3
{{ source.title }}
/h3
div v-html=source.snippet/div
/div
/模板
脚本
导出默认值{
道具：{
索引：{
//当前项目的索引
类型：数量，
},
来源：{
类型：对象，
默认(){
return { }；
},
},
},
};
/脚本
样式范围。列表项目{
填充：0 10px 20px 10px
}。列表项h3 {
边距：0;
填充-底部：10px
}
/风格
我们可以通过搜索标题或描述来得到结果，请求数据来源于维基百科。
搜索（查询，页面){
//我们准备维基百科应用程序接口期望的数据。
常量数据={
操作："查询",
格式： json ，
列表："搜索",
继续：- ,
utf8: 1，
srsearch:查询，
sroffset:第* 10页，
来源："*",
};
//然后我们将这些参数转换成以下格式的参数
//action=queryformat=json.
const params=Object.keys(data)。地图（函数(k) {
返回数据[k]==
？
:encodeURIComponent(k)= encodeURIComponent(data[k])；
})。联接("");
//我们用参数字符串准备全球资源定位器(Uniform Resource Locator)
常量搜索URL=`https://en.wikipedia.org/w/api.php？$ { params } `；
//我们将装货设置为没错，以便可以显示加载程序
this.loading=true
//然后我们执行请求并连接结果
axios.get(searchUrl)。然后((响应)={
this . results=this . results . concat(response . data . query . search)；
//当然还要设置loading为false来隐藏加载器。
this.loading=false
});
}
搜索方法已经写好了，然后调用。
当用户键入内容搜索时调用。
当它被拉下时调用。
//EndlessList.vue
脚本
导出默认值{
//为了简洁起见，跳过了data()和方法
观察：{
搜索查询：{
即时：真的，
handler:lodash . de bounce(function(new val){
if (newVal==) {
返回；
}
this . results=[]；
this . current page=0；
this.search(newVal，this . current page)；
this.search(newVal，this . current page 1)；
this . current page=2；
}, 200),
},
},
已安装(){
const vm=this
window . on scroll=lodash . de bounce(function(){
var距离底部=
document . body . scroll height-window . inner height-window . scrolly；
if(distance from bottom 400 VM . search query！==) {
vm.search(vm.searchQuery，VM . current page)；
vm.currentPage
}
}，100，{ leading:true })；
},
}
/脚本
显然，当searchQuery发生变化时，我们会得到新的搜索结果。当然，这里的输入框也使用了防抖功能。
另外需要注意的是，我们第一次搜索加载两个页面的结果时，用户会有一些滚动空间，这样可以保持流畅的感觉。
我们还在翻滚事件中加入了防抖功能。这里有个问题：为什么要在window.onscroll事件下设置leading为true？
然后我们运行程序来看看效果：
npm运行开发
怎么样？只要不疯狂下拉，基本感受不到加载过程~
小结
用户不想每次下拉十个结果都要等着加载新的十个结果！所以我们需要有一个缓冲区，在它被拉下到底之前预测它的终点，然后提前加载。这是丝滑体验的核心。
当然不在视图区和缓冲区的DOM会被删除，这就是页面没有形成大量DOM元素的本质。
这样的动态处理列表确实是程序员的一种智慧和用心。
可以在本地克隆项目，再次体验。以上就是这个分享~
以上是Vue虚拟列表的实现例子的细节。更多关于Vue虚拟列表的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。