uniapp實現骨架屏

前言：使用者在等待資料渲染的時候，有可能因為網路速度慢，手機硬體等問題，造成等待時間延長，使得使用者體驗不好。

之前的做法是放個載入中的圖示，而現在是直接根據頁面原有元素繪製圖形的方式，讓使用者有種頁面就快渲染好的錯覺。

載入過程效果圖：如圖，從圖一到圖二，最底部多出了乙個動態載入的骨架，模擬同一頁面多個資料請求（每個請求所需時間不同），

我這邊的處理是在每個請求的**中，先賦值渲染的動態資料，再重新抓取需要繪製的動態元素（因為繪製的元素需要先有資料給它撐開），

最後頁面中的請求基本完成的時候，隱藏骨架屏，顯示原先的頁面

問題：對demo有更好建議的可以提出來哈，相互學習一下

**如下：

元件

1

2if="show" :style="">
3for="(item,rect_idx) in skeletonrectlists" :key="rect_idx + 'rect'" :class="[loading == 'chiaroscuro' ? 'chiaroscuro' : '']" 
4 :style="">
5for="(item,circle_idx) in skeletoncirclelists" :key="circle_idx + 'circle'" :class="loading == 'chiaroscuro' ? 'chiaroscuro' : ''" 
6 :style="">
7if="loading == 'spin'">89
1011
121397
98

頁面demo

123

4567
89}10
1112
13for="(item,index) in lists" :key="index" class="lists">14}
1516
1718}19
2021
2223
2425
2687
88

小程式（uniapp）骨架屏應用

1.基本理解 骨架屏實現原理很簡單，就是通過佔位線框元素，漸進式載入資料。骨架屏是結合了懶載入功能，在頁面沒有載入完成之前，先呈現頁面基本結構。效果圖 注意點 1,引入組建後,template 標籤內加入 2,data物件中設定showskeleton true 預設一開始進入頁面載入骨架屏內容。3...

骨架屏使用

骨架屏又稱佔位骨架屏，它是代替菊花圖的一種新型載入提示，具體樣式如下所示 目前 github 上主要實現思路有兩個，2.在布局檔案中，自定義乙個view對每個view進行包裹，具體實現庫有skeleton android 下面主要講第一種思路的實現，替換adapter，用到的庫是skeleton庫 ...

如何實現優美的骨架屏

對於前端來說，最重要的莫過於使用者體驗了，這次我們聊一聊骨架屏 skeleton screen 我們平常對於需要請求載入的內容，可能用的比較多的是loading動畫，比如在內容區域放乙個菊花圖，當請求結束，並且render tree構造完成後，將菊花圖移除，展示使用者想看的內容。雖然這種方式沒啥缺點...