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