feat(国王皇后打榜页): 新增图片预加载缓冲动画，并修复切换按钮的显示问题
This commit is contained in:
hzj
parent
268adf5c31
commit
46238542f2
@ -1,6 +1,14 @@
|
||||
<!-- src/views/Ranking/KingAndQueen/TopList.vue -->
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<!-- 预加载状态 -->
|
||||
<div v-if="isLoading" class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<p style="color: #fff">{{ $t('loading') }}...</p>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<div v-else>
|
||||
<div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
|
||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||||
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
||||
@ -127,7 +135,13 @@
|
||||
|
||||
<!-- 每周礼物 -->
|
||||
<div
|
||||
style="display: flex; justify-content: center; width: 108vw; position: relative; left: -4vw"
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 108vw;
|
||||
position: relative;
|
||||
left: -4vw;
|
||||
"
|
||||
>
|
||||
<itemCenter :imgUrl="imageUrl('eventGifts')">
|
||||
<div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
|
||||
@ -348,7 +362,12 @@
|
||||
>
|
||||
<!-- 内容 -->
|
||||
<div
|
||||
style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px"
|
||||
style="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 16px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="width: 40%"
|
||||
@ -652,7 +671,11 @@
|
||||
width: 22%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom, rgba(255, 224, 60, 1), rgba(255, 189, 19, 1));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 224, 60, 1),
|
||||
rgba(255, 189, 19, 1)
|
||||
);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -733,6 +756,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -756,6 +780,9 @@ import borderImg from './components/borderImg.vue'
|
||||
import itemCenter from '@/components/itemCenter.vue'
|
||||
import maskLayer from '@/components/MaskLayer.vue'
|
||||
|
||||
// 预加载状态
|
||||
const isLoading = ref(true)
|
||||
|
||||
// 获取OSS图片URL的函数
|
||||
const imageUrl = (filename) => getPngUrl('Ranking/KingQueen/', filename)
|
||||
|
||||
@ -763,9 +790,7 @@ const imageUrl = (filename) => getPngUrl('Ranking/KingQueen/', filename)
|
||||
const connectToAppHandler = async () => {
|
||||
await connectToApp(() => {
|
||||
// 连接成功回调
|
||||
getUserInfo()
|
||||
updatePageData() // 刷新页面数据
|
||||
preloadCriticalImages() // 预加载关键图片
|
||||
completePreloading() // 完成预加载
|
||||
})
|
||||
}
|
||||
|
||||
@ -1023,17 +1048,29 @@ const observer = new IntersectionObserver((entries) => {
|
||||
})
|
||||
|
||||
// 刷新页面数据
|
||||
const updatePageData = () => {
|
||||
getTopList(kingListParams.value) // 获取国王榜单
|
||||
getTopList(queenListParams.value) // 获取女王榜单
|
||||
getRewardsAndGifts() //获取本周的礼物和国王和皇后top奖励列表
|
||||
getAllTopOne() //获取近几个月的榜首国王女王
|
||||
const updatePageData = async () => {
|
||||
// 重置数据
|
||||
kingList.value = []
|
||||
queenList.value = []
|
||||
kingListCurrent.value = 1
|
||||
queenListCurrent.value = 1
|
||||
showKingLoading.value = true
|
||||
showQueenLoading.value = true
|
||||
|
||||
await Promise.all([
|
||||
getTopList(kingListParams.value), // 获取国王榜单
|
||||
getTopList(queenListParams.value), // 获取女王榜单
|
||||
getRewardsAndGifts(), //获取本周的礼物和国王和皇后top奖励列表
|
||||
getAllTopOne(), //获取近几个月的榜首国王女王
|
||||
])
|
||||
}
|
||||
|
||||
// 预加载关键图片
|
||||
const preloadCriticalImages = () => {
|
||||
const preloadCriticalImages = async () => {
|
||||
const criticalImages = [
|
||||
imageUrl('bg'),
|
||||
// imageUrl('border-item'), // 这个是用在background-image的，无法使用v-smart-img指令
|
||||
// imageUrl('border-item-user'), // 这个是用在background-image的，无法使用v-smart-img指令
|
||||
imageUrl('help'),
|
||||
imageUrl('history'),
|
||||
imageUrl('listTitle'),
|
||||
@ -1046,9 +1083,7 @@ const preloadCriticalImages = () => {
|
||||
imageUrl('queenBt'),
|
||||
imageUrl('kingBt'),
|
||||
imageUrl('queenBtActive'),
|
||||
imageUrl('border-item-user'),
|
||||
imageUrl('helpInfo'),
|
||||
imageUrl('border-item'),
|
||||
imageUrl('timeBack'),
|
||||
imageUrl('timeNext'),
|
||||
imageUrl('cancel'),
|
||||
@ -1060,7 +1095,20 @@ const preloadCriticalImages = () => {
|
||||
imageUrl('top3'),
|
||||
]
|
||||
|
||||
preloadImages(criticalImages)
|
||||
await preloadImages(criticalImages)
|
||||
}
|
||||
|
||||
// 完成预加载
|
||||
const completePreloading = async () => {
|
||||
try {
|
||||
// 执行所有初始化操作
|
||||
await Promise.all([getUserInfo(), updatePageData(), preloadCriticalImages()])
|
||||
} catch (error) {
|
||||
console.error('预加载过程中发生错误:', error)
|
||||
} finally {
|
||||
// 无论成功或失败都结束加载状态
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时检测环境
|
||||
@ -1116,6 +1164,36 @@ onUnmounted(() => {
|
||||
font-weight: 860;
|
||||
}
|
||||
|
||||
/* 添加加载动画样式 */
|
||||
.loading-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #f59e0b;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user