首先說明 本文的虛擬滾動條是用於app， 沒有在微信小程序中測試過，只在web環境和app（安卓、蘋果）這三個環境中測試通過。
虛擬滾動條的原因當然是列表數據太多，列表直接顯示app會卡（web是一點不卡的，蘋果有點卡，本人的千元安卓是卡爆了）。
1、使用web的方式解決（第一版）
1.1 計算所有數據的總高度，再通過uniapp本身的函數計算滾動條的高度
可以通過： 通過uni.getSystemInfoSync()獲取窗口寬度和高度動態設置 scroll-view 高度 :style動態綁定height高度。
1.2 然后在下拉的時候算出當前需要顯示哪些數據通過事件scroll 算出當前需要顯示的數據， 然后在頁面上顯示。
這個解決方案后解決了了卡的問題，但是引入了新的問題，行高度多少合適，如果有圖片怎么辦，文字數據多怎么辦。
如果行高度設置少了，會出現文字顯示到第二行上了，活着圖片不能自適應顯示。 如果文字設置多了會出現有不需要的空白出現，影響美觀。
2、使用web的方式解決（第二版）
這個版本是在第二部的基礎上把行設置成自適應。基本能解決行的數據顯示問題。但是這里出現了一個新的問題。 需要顯示什么數據計算的不是特別准確。這一版改造后蘋果上基本上是沒什么問題了，但是千元的安卓手機還是有點不流暢，反應卡頓；表現為上下滾動的時候數據不能馬上刷出來。老板這個時候發話了，你們行不行，不行的話我到外面花錢解決。男人這時候怎么能說不行。所以有了第三版（死要面子活受罪）
3、參考游戲界面的設計（第三版）
不知道在什么時候看到過一篇騰訊游戲的開發工程師在博客園發的一篇文章里面說的游戲的優化，提到過一個詞構建的元素重新復用。我的解決方案在高度和顯示數據的計算上和第一版沒有區別，但是頁面列表的數據顯示上就有區別了。
首先列表中數據行數我只渲染比顯示數據多2條，就是顯示數據的上面一條和下面一條。當然如果實際列表數據比顯示數據少那么就直接顯示就可以了。 然后列表的數據直接就渲染完成。通過計算， 把需要顯示的數據直接顯示在已經渲染好的列表數據上就可以了。
這里性能是完美的，就是有一個問題行高和圖片自適應的問題。
4、基於第三版的最終版（性能優化沒有終點）
關於圖片采用了一個簡單辦法直接固定寬高（小圖顯示，列表上不需要大圖顯示），關於文字的顯示。在程序往下滾得時候在數據顯示的時候程序自動算出行的高度，然后保存並重現計算所有數據的總高度計算。目前這一版基本完美，在千元機上能夠流暢顯示數據。