uniapp實現骨架屏

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

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

參考資料：

https://ext.dcloud.net.cn/plugin?id=256

備注：我是准備應用到項目中，從uniapp的插件市場下載了demo，結果出現一些小問題，在下載下來的demo做了些小修改

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

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

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

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

代碼如下：

組件

<template>
    <view v-if="show" :style="{width: systemInfo.width + 'px', height: systemInfo.height + 'px', backgroundColor: bgcolor, position: 'absolute', left: 0, top: 0, zIndex: 9998, overflow: 'hidden'}">
        <view v-for="(item,rect_idx) in skeletonRectLists" :key="rect_idx + 'rect'" :class="[loading == 'chiaroscuro' ? 'chiaroscuro' : '']" 
        :style="{width: item.width + 'px', height: item.height + 'px', backgroundColor: 'rgb(194, 207, 214)', position: 'absolute', left: item.left + 'px', top: item.top + 'px'}"></view>
        <view v-for="(item,circle_idx) in skeletonCircleLists" :key="circle_idx + 'circle'" :class="loading == 'chiaroscuro' ? 'chiaroscuro' : ''" 
        :style="{width: item.width + 'px', height: item.height + 'px', backgroundColor: 'rgb(194, 207, 214)', borderRadius: item.width + 'px', position: 'absolute', left: item.left + 'px', top: item.top + 'px'}"></view>
        <view class="spinbox" v-if="loading == 'spin'">
            <view class="spin"></view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "skeleton",
        props: {
            bgcolor: {
                type: String,
                value: '#FFF'
            },
            selector: {
                type: String,
                value: 'skeleton'
            },
            loading: {
                type: String,
                value: 'spin'
            },
            show: {
                type: Boolean,
                value: false
            },
            isNodes: {
                type: Number,
                value: false
            } //控制什么時候開始抓取元素節點,只要數值改變就重新抓取
        },
        data() {
            return {
                loadingAni: ['spin', 'chiaroscuro'],
                systemInfo: {},
                skeletonRectLists: [],
                skeletonCircleLists: []
            }
        },
        watch: {
            isNodes (val) {
                this.readyAction();
            }
        },
        mounted() {
            this.attachedAction();
        },
        methods: {
            attachedAction: function(){
                //默認的首屏寬高，防止內容閃現
                const systemInfo = uni.getSystemInfoSync();
                this.systemInfo = {
                    width: systemInfo.windowWidth,
                    height: systemInfo.windowHeight
                };
                this.loading = this.loadingAni.includes(this.loading) ? this.loading : 'spin';
            },
            readyAction: function(){
                console.log('子組件readyAction')
                const that = this;
                //繪制背景
                uni.createSelectorQuery().selectAll(`.${this.selector}`).boundingClientRect().exec(function(res){
                    that.systemInfo.height = res[0][0].height + res[0][0].top;
                });
                
                //繪制矩形
                this.rectHandle();

                //繪制圓形
                this.radiusHandle();
            },
            rectHandle: function(){
                const that = this;

                //繪制不帶樣式的節點
                uni.createSelectorQuery().selectAll(`.${this.selector}-rect`).boundingClientRect().exec(function(res){
                    that.skeletonRectLists = res[0];
                });

            },
            radiusHandle(){
                const that = this;

                uni.createSelectorQuery().selectAll(`.${this.selector}-radius`).boundingClientRect().exec(function(res){
                    that.skeletonCircleLists = res[0];
                });
            }
        }
    }
</script>

<style>
.spinbox{
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: 9999
}
.spin {
  display: inline-block;
  width: 64rpx;
  height: 64rpx;
}
.spin:after {
  content: " ";
  display: block;
  width: 46rpx;
  height: 46rpx;
  margin: 1rpx;
  border-radius: 50%;
  border: 5rpx solid #409eff;
  border-color: #409eff transparent #409eff transparent;
  animation: spin 1.2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.chiaroscuro{
  width: 100%;
  height: 100%;
  background: rgb(194, 207, 214);
  animation-duration: 2s;
  animation-name: blink;
  animation-iteration-count: infinite;
}

@keyframes blink {
  0% {
    opacity: .4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: .4;
  }
}

@keyframes flush {
  0% {
    left: -100%;
  }
  50% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
.shine {
  animation: flush 2s linear infinite;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to left,
  rgba(255, 255, 255, 0) 0%,
  rgba(255, 255, 255, .85) 50%,
  rgba(255, 255, 255, 0) 100%
  )
}
</style>

頁面demo

<template>
    <view class="controller">
        <view class="container skeleton" :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
            <view class="userinfo">
                <block>
                    <!--skeleton-radius 繪制圓形-->
                    <image class="userinfo-avatar skeleton-radius" :src="userInfo.avatarUrl" mode="cover"></image>
                     <!--skeleton-rect 繪制矩形-->
                    <text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
                </block>
            </view>
            <view style="margin: 20px 0">
                <view v-for="(item,index) in lists" :key="index" class="lists">
                    <text class="skeleton-rect">{{item}}</text>
                </view>
            </view>
            <view class="usermotto">
                <text class="user-motto skeleton-rect">{{motto}}</text>
            </view>
        </view>
        <!--引用組件-->
        <skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton>
    </view>
</template>

<script>
    //引入骨架屏組件(以我本地地址為例，具體地址由自身引用位置決定)
    import skeleton from "@/components/quick-skeleton/quick-skeleton.vue";
    export default {
        data() {
            return {
                motto: '',
                userInfo: {
                    avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/s4RzXCAQsVNliaJXtHBvdpAkeRwnK7Jhiaf9mzuVqEhZza3zSYM7tJ1xZCQE9SCoOR8qjVEjDKltw1SQnxyicWq6A/132',
                    nickName: 'jayzou'
                },
                // lists: [
                //     '第1行數據',
                //     '第2行數據',
                //     '第3行數據',
                //     '第4行數據',
                //     '第5行數據',
                //     '第6行數據'
                // ],
                lists: [], //如果沒有默認數據
                showSkeleton: true,  //骨架屏顯示隱藏
                isNodes: 0 //控制什么時候開始抓取元素節點,只要數值改變就重新抓取
            };
        },
        components: {
            skeleton
        },
        onLoad: function () {
            const that = this;
            
            //問題：骨架屏出現的時間段，部分已經渲染完畢，但還是得等骨架屏隱藏才一起出現
            
            setTimeout(() => {
                this.lists = [
                    '第1行數據',
                    '第2行數據',
                    '第3行數據',
                    '第4行數據',
                    '第5行數據',
                    '第6行數據'
                ]
                that.isNodes ++;
            }, 182);
            
            setTimeout(() => {
                that.motto = 'Hello World'
                that.isNodes ++;
            }, 500);
            
            setTimeout(() => {
                that.showSkeleton = false;
            }, 2000);
        },
        /**
         *  頁面載入完成后調用子組件的方法生成預加載效果
         */
        onReady:function(){
            
        }
    }
</script>

<style>
.container {
    padding: 20upx 60upx;
}
/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  color: #aaa;
}
.usermotto {
  margin-top: 200px;
}
.lists{
  margin: 10px 0;
}
.list{
  margin-right: 10px;
}
</style>