Fix：5953 【商城小程序】使用指南页面切换分类类型时页面刷新，短暂展示“暂无数据”，需优化页面切换刷新效果

pages/VideoPlayBackList/VideoPlayBackList.vue

@@ -41,7 +41,9 @@
       </view>
     </view>
 
-    <view class="v4-nodata" v-show="!hasList">
+    <view class="loading-more" v-show="isWait">加载中...</view>
+
+    <view class="v4-nodata" v-show="showEmpty">
       <image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
       <view class="text">暂无数据</view>
     </view>
@@ -73,12 +75,16 @@ export default {
       leftHeight: 0,
       rightHeight: 0,
       isWait: false,
+      requestId: 0,
       pageKeyId: Object.freeze('findVideoList')
     }
   },
   computed: {
     hasList() {
       return this.leftList.length + this.rightList.length > 0
+    },
+    showEmpty() {
+      return !this.isWait && !this.hasList
     }
   },
   onLoad(options) {
@@ -106,7 +112,9 @@ export default {
     changeType(item) {
       this.type = item.value
       this.page = 1
-      this.resetList()
+      // 使进行中的请求失效并解锁，避免切换时被上一次请求阻塞
+      this.requestId++
+      this.isWait = false
       this.fetchList()
     },
     resetList() {
@@ -117,6 +125,7 @@ export default {
     },
     async fetchList() {
       if (this.isWait) return
+      const requestId = ++this.requestId
       this.isWait = true
       const params = {
         type: this.type,
@@ -125,13 +134,17 @@ export default {
       }
       try {
         const res = await getVideoList(params)
+        // 请求已被更新的请求（如切换分类）取代，丢弃本次结果
+        if (requestId !== this.requestId) return
         if (res.status === 200) {
           const items = res.data
           for (let i = 0; i < items.length; i++) {
             items[i].hide = true
           }
-          // 并行获取所有封面高度
+          // 并行获取所有封面高度，完成后一次性替换列表，避免闪现空列表
           const heights = await Promise.all(items.map(item => this.getImageHeight(item.cover)))
+          if (requestId !== this.requestId) return
+          if (this.page === 1) this.resetList()
           items.forEach((item, i) => {
             this.pushToColumn(item, heights[i] + TEXT_HEIGHT)
           })
@@ -139,7 +152,9 @@ export default {
       } catch (e) {
         // 忽略请求或图片尺寸获取失败
       } finally {
-        this.isWait = false
+        if (requestId === this.requestId) {
+          this.isWait = false
+        }
       }
     },
     getImageHeight(src) {
@@ -252,4 +267,11 @@ export default {
     }
   }
 }
+
+.loading-more {
+  padding: 24rpx 0;
+  text-align: center;
+  font-size: 24rpx;
+  color: #999;
+}
 </style>