前言

之前缺乏移动端的经验。一直不知道上拉加载，下拉刷新是怎么实现的。现在正好有个产品有这样一个需求。想了一会没有思路。就去找插件。啥vue-无限滚动，vue-虚拟滚动列表。啊呀，牛！无限滚动，十万条数据渲染。

经过我一大圈的折腾。还是默默的卸载了插件。我只是需要实现一个下拉加载，不需要其他这么多的功能。看了看其他人的源码，直接撸了起来，实现一个目录组件。

效果展示

MList.vue

模板div class=' list-wrap ' div class=' content ' ref=' list ' @ scroll=' on croll ' slot/slot/div class=' loading ' v-show=' loading '正在加载数据./div/div/模板脚本lang=' ts '从“vue-房产装饰商”导入{组件、Vue、手表、道具}；@ Component({ components 3360 } })导出默认类扩展了Vue { @Prop()私有加载！布尔型；private OnCrol(){ const obj : any=this .$ refs.list//客户端高度视口高度scrollTop滚动条离顶部的高度滚动高度列表内容的高度如果。客户身高。滚动顶部===obj。滚动高度){这个.$ emit(' ToBottom ')；} }}/scriptstyle作用域为lang="SCS ".列表包装{宽度： 100%；高度： 100%;相对位置：内容{宽度： 100%；高度： 100%;溢出-y:滚动；} .加载{位置：绝对值；底部：-20px；宽度： 100%;height : 20pxcolor : # ffffff } } :-web套件-滚动条{//去除滚动条边框宽度： 0!重要；} :-web工具包-滚动条{宽度： 0！重要；高度： 0;}/样式使用组件

div class=' body ' m-list @ to bottom=' fetchNewData()' : loading=' loading ' code-info class=' item ' v-for='(item，index)in dataList ' : key=' index '/code-info/m-list/div private dataList 3360 any[]=[1，2，3，4，5，6，7，8]；私有加载：布尔值=falseprivate fetchNewData(){ this。loading=truesetTimeout(()={ this。数据列表。push(1，2，3)；const ref: any=this .$ refs . vueloadthis . loading=false }，1000)；}这里需要注意的是m列表的父容器一定要固定高度，本例为身体。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。