feat: 【我的作品】作品列表查询数据时显示骨架图。

src/components/workCardSkeleton.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="skeleton">
+    <div class="image"></div>
+    <div class="title"></div>
+    <div class="bottom">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.skeleton {
+  height: 100%;
+  background: #fff;
+  .image {
+    width: 100%;
+    height: 240px;
+    background: #F7F8FA;
+  }
+  .title {
+    width: 147px;
+    height: 20px;
+    background: #F7F8FA;
+    border-radius: 10px;
+    margin-top: 16px;
+    margin-left: 14px; 
+  }
+  .bottom {
+    margin: 18px 14px 14px 14px;
+    display: flex;
+    justify-content: space-between;
+    .left {
+      width: 80px;
+      height: 14px;
+      background: #F7F8FA;
+      border-radius: 10px;
+    }
+    .right {
+      width: 42px;
+      height: 14px;
+      background: #F7F8FA;
+      border-radius: 10px;
+    }
+  }
+}
+</style>

src/views/material/works/index.vue

@@ -20,11 +20,12 @@
       </div>
     </div>
     <div class="mask" v-show="isShowMask"></div>
+    <!-- 断网时，输入关键字触发网络请求后，骨架图的隐藏会触发v-infinite-scroll，原因未知。进而导致循环触发，因此list为空时要禁用v-infinite-scroll -->
     <ul
       class="w-list"
       v-if="!(list.length === 0 && !hasMoreData)"
       v-infinite-scroll="requestMoreData"
-      :infinite-scroll-disabled="!hasMoreData || isRequestingMoreData"
+      :infinite-scroll-disabled="!hasMoreData || isRequestingMoreData || (list.length === 0)"
       ref="w-list-ref"
       @scroll.self="onWorkListScroll"
     >
@@ -38,33 +39,41 @@
           </div>
         </div>
       </li>
-        <li v-for="(item,i) in list" :key="i" :class="{'has-more-data': hasMoreData}">
+      <!-- 骨架图 -->
+      <template v-if="isRequestingMoreData && (list.length === 0)">
+        <li  v-for="index in 19" :key="index">
           <div class="wrapper">
-            <div class="li-hover">
-              <span class="lipreview" @click="handlePreview(item)">预览</span>
-              <ul class="oper">
-                <li class="comfirmhover" @click="edit(item)"><i class="iconfont icon-works_editor"></i>编辑</li>
-                <li class="comfirmhover" @click="openShare(item)"><i class="iconfont icon-works_share"></i>分享</li>
-                <li class="cancelhover" @click="del(item, i)"><i class="iconfont icon-works_delete"></i>删除</li>
-              </ul>
-            </div>
-            <div class="img" @click="handlePreview(item)">
-              <img class="real" :src="item.icon||$thumb" alt="" />
+            <workCardSkeleton></workCardSkeleton>
+          </div>
+        </li>
+      </template>
+      <li v-for="(item,i) in list" :key="i" :class="{'has-more-data': hasMoreData}">
+        <div class="wrapper">
+          <div class="li-hover">
+            <span class="lipreview" @click="handlePreview(item)">预览</span>
+            <ul class="oper">
+              <li class="comfirmhover" @click="edit(item)"><i class="iconfont icon-works_editor"></i>编辑</li>
+              <li class="comfirmhover" @click="openShare(item)"><i class="iconfont icon-works_share"></i>分享</li>
+              <li class="cancelhover" @click="del(item, i)"><i class="iconfont icon-works_delete"></i>删除</li>
+            </ul>
+          </div>
+          <div class="img" @click="handlePreview(item)">
+            <img class="real" :src="item.icon||$thumb" alt="" />
+          </div>
+          <div class="li-info">
+            <div>
+              <span class="shenglve tttttt" :title="item.name||'无标题'">{{item.name||'无标题'}}</span>
             </div>
-            <div class="li-info">
-              <div>
-                <span class="shenglve tttttt" :title="item.name||'无标题'">{{item.name||'无标题'}}</span>
-              </div>
-              <div>
-                <span>{{item.createTime.split(' ')[0]}}</span>
-                <div :title="item.visit">
-                  <i class="iconfont iconworks_look"></i>{{item.visit>10000?'1w+':item.visit}}
-                </div>
+            <div>
+              <span>{{item.createTime.split(' ')[0]}}</span>
+              <div :title="item.visit">
+                <i class="iconfont iconworks_look"></i>{{item.visit>10000?'1w+':item.visit}}
               </div>
             </div>
           </div>
+        </div>
       </li>
-      <div class="work-list-loading-wrapper" v-show="isRequestingMoreData">
+      <div class="work-list-loading-wrapper" v-show="isRequestingMoreData && (list.length !== 0)">
         <img class="work-list-loading" :src="require('@/assets/images/icons/work-list-loading.gif')" />
       </div>
     </ul>
@@ -91,6 +100,7 @@
 <script>
 import share from '../popup/share'
 import preview from "@/components/preview";
+import workCardSkeleton from "@/components/workCardSkeleton.vue";
 import config from "@/config";
 import { debounce } from "@/utils/other.js"
 
@@ -104,7 +114,8 @@ import {
 export default {
   components:{
     share,
-    preview
+    preview,
+    workCardSkeleton,
   },
   data(){
     return {
@@ -132,6 +143,7 @@ export default {
     }
   },
   mounted(){
+    this.requestMoreData()
   },
   watch:{
     searchKey: {
@@ -228,7 +240,7 @@ export default {
     requestMoreData() {
       this.isRequestingMoreData = true
       const lastestUsedSearchKey = this.searchKey
-              getWorksList(
+      getWorksList(
         {
           pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
           pageSize: config.PAGE_SIZE,
@@ -359,13 +371,14 @@ export default {
     align-content: flex-start;
     >li {
       width: calc((100% - @gap * 4) / 5);
+      height: 322px;
       margin-bottom: @gap;
       margin-right: @gap;
       &:nth-of-type(5n){
         margin-right: 0;
       }
       // 因为有个“创建作品”card占着空间，每次拿20个数据，每行五个，又不想每次拿到数据后最后一行只有一个card，所以把最后那个card隐藏掉。
-      &:nth-last-of-type(1).has-more-data {
+      &:last-of-type.has-more-data {
         display: none;
       }
       .wrapper {