首先说明 本文的虚拟滚动条是用于app， 没有在微信小程序中测试过，只在web环境和app（安卓、苹果）这三个环境中测试经过。web
虚拟滚动条的缘由固然是列表数据太多，列表直接显示app会卡（web是一点不卡的，苹果有点卡，本人的千元安卓是卡爆了）。小程序
一、使用web的方式解决（初版）微信小程序
1.1 计算全部数据的总高度，再经过uniapp自己的函数计算滚动条的高度性能优化
能够经过： 经过uni.getSystemInfoSync()获取窗口宽度和高度动态设置 scroll-view 高度 :style动态绑定height高度。微信
1.2 而后在下拉的时候算出当前须要显示哪些数据经过事件scroll 算出当前须要显示的数据， 而后在页面上显示。app
这个解决方案后解决了了卡的问题，可是引入了新的问题，行高度多少合适，若是有图片怎么办，文字数据多怎么办。函数
若是行高度设置少了，会出现文字显示到第二行上了，活着图片不能自适应显示。 若是文字设置多了会出现有不须要的空白出现，影响美观。性能
二、使用web的方式解决（第二版）测试
这个版本是在第二部的基础上把行设置成自适应。基本能解决行的数据显示问题。可是这里出现了一个新的问题。 须要显示什么数据计算的不是特别准确。这一版改造后苹果上基本上是没什么问题了，可是千元的安卓手机仍是有点不流畅，反应卡顿；表现为上下滚动的时候数据不能立刻刷出来。老板这个时候发话了，大家行不行，不行的话我到外面花钱解决。男人这时候怎么能说不行。因此有了第三版（死要面子活受罪）优化
三、参考游戏界面的设计（第三版）
不知道在何时看到过一篇腾讯游戏的开发工程师在博客园发的一篇文章里面说的游戏的优化，提到过一个词构建的元素从新复用。个人解决方案在高度和显示数据的计算上和初版没有区别，可是页面列表的数据显示上就有区别了。
首先列表中数据行数我只渲染比显示数据多2条，就是显示数据的上面一条和下面一条。固然若是实际列表数据比显示数据少那么就直接显示就能够了。 而后列表的数据直接就渲染完成。经过计算， 把须要显示的数据直接显示在已经渲染好的列表数据上就能够了。
这里性能是完美的，就是有一个问题行高和图片自适应的问题。
四、基于第三版的最终版（性能优化没有终点）
关于图片采用了一个简单办法直接固定宽高（小图显示，列表上不须要大图显示），关于文字的显示。在程序往下滚得时候在数据显示的时候程序自动算出行的高度，而后保存并重现计算全部数据的总高度计算。目前这一版基本完美，在千元机上可以流畅显示数据。