这次的项目要开发一个移动端的产品，要求列表滚动展示，有下拉刷新功能，上滑到底部继续加载，一直滑动一直加载。我采用的是vant组件库。

由于列表要展示图片，当大概加载了百来条数据就会出现卡顿不流畅的现象。因为刚开始的时候加载十分流畅，越往下滑越卡顿，所以猜测不是请求发送的问题，而是渲染DOM的问题，越滑动DOM树积累越多，导致页面不流畅。

我在网上搜索到了类似的问题解决方案，基本上是说去实现虚拟滚动，只显示设备屏幕范围的内容，其上下看不到的数据不进行渲染，可以提高效率。

难受的是我并没有找到vant组件支持的方案，官方文档的list组件只有往数组里push的功能，没有任何优化，网上也没搜到有人使用vant列表出现过类似的问题。

我还搜到了一个叫vue-virtual-scroller的组件库，可以实现虚拟滚动，正当我打算尝试把这个组件和van-list结合使用的时候，发现光是引用vue-virtual-scroller编译器就开始报错了。

目前没来得及解决这个问题，不知道有没有大神能帮忙看一看。不过我干脆就不引入了，一不做二不休，手撕吧。

要想隐藏设备显示区域之外的内容，就要先获取到滚轮的位置，这样就能通过滚动的长度来判断列表是否在屏幕显示外侧。

但是在哪里能获取到scrollTop呢……经过多次尝试，发现滚轮的值根本不在van-list上，如果你使用了van-pull-refresh，scroll的值在这个组件里面。

给组件加一个 ref=“refresh”，就可以调用this.$refs.refresh.scrollEl.scrollY来获取scroll的值。

拿到scroll的值还算好说，然而这个值你直接获取只能拿到一次，如何才能实时监测值的变化呢？

一般来说组件应当有个滚动即触发的方法，最坑的是，官方文档上啥都没写，网上也搜不到，最后我依旧是在van-pull-refresh组件里乱翻它内部的方法，然后瞎勾巴试，发现它居然是有滚动触发的方法的！就是 $refs.refresh.scrollEl.scroll ，给这个方法添加函数调用就可以，官方居然没写！也没给组件功能做接口！

滚轮最开始的值为0，往下滚动逐渐增加，可以通过调试取一个大概的范围，让scroll的值在某一范围内时，显示某一项。

设列表行高100px，每多一项都要在有效范围+100，这里要用到v-for循环的index来辅助计算。

首先写一个函数，获取scroll的值。

然后在mounted获取组件实例，将函数赋值过去，实现每次滚动都调用onScroll()。

根据每次滚动取到的值，用v-if来判断是否显示列表某一项。

重点是van-cell的v-if条件，我这里每列设置的是100px，所以相当于显示上15条和下15条，大概理解一下就行。

还有一点一定要注意，包住van-cell的那个div一定要设置高度，不然div里面的van-cell一旦不渲染，高度就会缩小，滚轮的值也会变，会出现抽搐现象。