uniapp 虛擬滾動條性能優化

首先說明 本文的虛擬滾動條是用於app， 沒有在微信小程序中測試過，只在web環境和app（安卓、蘋果）這三個環境中測試經過。

虛擬滾動條的緣由固然是列表數據太多，列表直接顯示app會卡（web是一點不卡的，蘋果有點卡，本人的千元安卓是卡爆了）。

一、使用web的方式解決（初版）

　   1.1 計算全部數據的總高度，再經過uniapp自己的函數計算滾動條的高度

　　　能夠經過：　經過uni.getSystemInfoSync()獲取窗口寬度和高度動態設置 scroll-view 高度 :style動態綁定height高度。

       1.2  而後在下拉的時候算出當前須要顯示哪些數據經過事件scroll  算出當前須要顯示的數據， 而後在頁面上顯示。

     這個解決方案後解決了了卡的問題，可是引入了新的問題，行高度多少合適，若是有圖片怎麼辦，文字數據多怎麼辦。

     若是行高度設置少了，會出現文字顯示到第二行上了，活着圖片不能自適應顯示。 若是文字設置多了會出現有不須要的空白出現，影響美觀。

二、使用web的方式解決（第二版）

       這個版本是在第二部的基礎上把行設置成自適應。基本能解決行的數據顯示問題。可是這裏出現了一個新的問題。 須要顯示什麼數據計算的不是特別準確。這一版改造後蘋果上基本上是沒什麼問題了，可是千元的安卓手機仍是有點不流暢，反應卡頓；表現爲上下滾動的時候數據不能立刻刷出來。老闆這個時候發話了，大家行不行，不行的話我到外面花錢解決。男人這時候怎麼能說不行。因此有了第三版（死要面子活受罪）

三、參考遊戲界面的設計（第三版）

　   不知道在何時看到過一篇騰訊遊戲的開發工程師在博客園發的一篇文章裏面說的遊戲的優化，提到過一個詞構建的元素從新複用。個人解決方案在高度和顯示數據的計算上和初版沒有區別，可是頁面列表的數據顯示上就有區別了。

首先列表中數據行數我只渲染比顯示數據多2條，就是顯示數據的上面一條和下面一條。固然若是實際列表數據比顯示數據少那麼就直接顯示就能夠了。 而後列表的數據直接就渲染完成。經過計算， 把須要顯示的數據直接顯示在已經渲染好的列表數據上就能夠了。

　　這裏性能是完美的，就是有一個問題行高和圖片自適應的問題。

四、基於第三版的最終版（性能優化沒有終點）

　　關於圖片採用了一個簡單辦法直接固定寬高（小圖顯示，列表上不須要大圖顯示），關於文字的顯示。在程序往下滾得時候在數據顯示的時候程序自動算出行的高度，而後保存並重現計算全部數據的總高度計算。目前這一版基本完美，在千元機上可以流暢顯示數據。