diff --git a/pages/VideoPlayBackList/VideoPlayBackList.vue b/pages/VideoPlayBackList/VideoPlayBackList.vue index e74a49a..3256fd7 100644 --- a/pages/VideoPlayBackList/VideoPlayBackList.vue +++ b/pages/VideoPlayBackList/VideoPlayBackList.vue @@ -41,7 +41,9 @@ - + 加载中... + + 暂无数据 @@ -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; +}