feat: 页面优化,修复低端机文本不滚动的问题

This commit is contained in:
hzj 2026-05-15 12:07:05 +08:00
parent e553529f36
commit 34e2f13bc7
13 changed files with 7 additions and 53 deletions

4
.env
View File

@ -1,11 +1,11 @@
# 应用版本号 # 应用版本号
VITE_APP_VERSION=7.0.1 VITE_APP_VERSION=7.0.2
# 版本类型 # 版本类型
# major:重大更新(清除除了白名单外的所有缓存用户缓存、图片缓存和assets缓存) # major:重大更新(清除除了白名单外的所有缓存用户缓存、图片缓存和assets缓存)
# minor:一般更新 # minor:一般更新
# patch:日常小更新 # patch:日常小更新
VITE_VERSION_TYPE=major VITE_VERSION_TYPE=patch
# 是否启用版本检查 # 是否启用版本检查
VITE_ENABLE_VERSION_CHECK=true VITE_ENABLE_VERSION_CHECK=true

View File

@ -249,7 +249,7 @@ el.decoding = 'async'
这样可以减少图片加载时的主线程和合成压力。 这样可以减少图片加载时的主线程和合成压力。
### 9. 全局低端机移除高成本模糊和跑马灯动画 ### 9. 全局低端机移除高成本模糊,滚动动画保持可用
修改文件: 修改文件:
@ -262,7 +262,9 @@ backdrop-filter
-webkit-backdrop-filter -webkit-backdrop-filter
``` ```
并暂停 `.scroll-wrapper` 这类持续跑马灯动画。系统开启减少动画时,也会暂停弹幕和滚动动画。 低端机模式不再暂停 `.scroll-wrapper` 这类跑马灯动画,避免排行榜、奖励列表、用户昵称等文本滚动完全不动。只有用户系统主动开启“减少动态效果”时,才暂停弹幕和滚动动画。
同时,多个活动页和榜单页的 `isLoading` 预加载阶段已取消渲染 `BackgroundLayer`,只保留 `LoadingSpinner` 和 loading 文案,避免加载态和正式页面重复创建背景图层。
### 10. 弹幕组件专项优化 ### 10. 弹幕组件专项优化

View File

@ -28,9 +28,7 @@ html.low-performance-mode *::after {
-webkit-backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
} }
/* 低端机和系统减少动画模式下,暂停非交互类装饰动画。 */ /* 用户系统主动要求减少动态效果时,暂停非交互类装饰动画。 */
html.low-performance-mode .scroll-wrapper,
html.low-performance-mode [class*='scroll-wrapper'],
html.reduce-motion-mode .barrage-item, html.reduce-motion-mode .barrage-item,
html.reduce-motion-mode .scroll-wrapper, html.reduce-motion-mode .scroll-wrapper,
html.reduce-motion-mode [class*='scroll-wrapper'] { html.reduce-motion-mode [class*='scroll-wrapper'] {

View File

@ -2,10 +2,6 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl('bg')]" />
<!-- 页面背景 -->
<!-- 加载动画 --> <!-- 加载动画 -->
<LoadingSpinner /> <LoadingSpinner />
<p>{{ t('loading') }}...</p> <p>{{ t('loading') }}...</p>

View File

@ -3,9 +3,6 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl('bg1'), imageUrl('bg2')]" />
<LoadingSpinner /> <LoadingSpinner />
<p>{{ $t('loading') }}...</p> <p>{{ $t('loading') }}...</p>
</div> </div>

View File

@ -2,12 +2,6 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer
:useCanvas="true"
:backgroundImages="[imageUrl('bg1'), imageUrl('bg2'), imageUrl('bg3')]"
/>
<!-- 加载动画 --> <!-- 加载动画 -->
<LoadingSpinner /> <LoadingSpinner />
<p>{{ t('loading') }}...</p> <p>{{ t('loading') }}...</p>

View File

@ -3,9 +3,6 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl('bg1'), imageUrl('bg2')]" />
<LoadingSpinner /> <LoadingSpinner />
<p>{{ $t('loading') }}...</p> <p>{{ $t('loading') }}...</p>
</div> </div>

View File

@ -2,20 +2,6 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer
:useCanvas="true"
v-show="!RankingShow"
:backgroundImages="[
imageUrl('bg1'),
imageUrl('bg2'),
imageUrl('bg3'),
imageUrl('bg4'),
imageUrl('bg5'),
imageUrl('bg6'),
]"
/>
<!-- 加载动画 --> <!-- 加载动画 -->
<LoadingSpinner /> <LoadingSpinner />
<p>{{ $t('loading') }}...</p> <p>{{ $t('loading') }}...</p>

View File

@ -2,12 +2,6 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer
:useCanvas="true"
:backgroundImages="[imageUrl('TaurusBg1'), imageUrl('TaurusBg2'), imageUrl('TaurusBg3')]"
/>
<!-- 加载动画 --> <!-- 加载动画 -->
<LoadingSpinner /> <LoadingSpinner />
<p>{{ $t('loading') }}...</p> <p>{{ $t('loading') }}...</p>

View File

@ -3,9 +3,6 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl('bg')]" />
<img <img
v-smart-img v-smart-img
:src="imageUrl('bg2')" :src="imageUrl('bg2')"

View File

@ -3,9 +3,6 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl('bg')]" />
<!-- 加载动画 --> <!-- 加载动画 -->
<LoadingSpinner /> <LoadingSpinner />
<p style="color: #fff">{{ $t('loading') }}...</p> <p style="color: #fff">{{ $t('loading') }}...</p>

View File

@ -5,7 +5,6 @@
:style="{ backgroundColor: currentRankingConfig.backgroundColor }" :style="{ backgroundColor: currentRankingConfig.backgroundColor }"
> >
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<BackgroundLayer :useCanvas="true" :backgroundImages="[currentBgImage]" />
<LoadingSpinner /> <LoadingSpinner />
<p>{{ t('loading') }}...</p> <p>{{ t('loading') }}...</p>
</div> </div>

View File

@ -3,9 +3,6 @@
<div class="fullPage"> <div class="fullPage">
<!-- 预加载状态 --> <!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container"> <div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl('bg')]" />
<!-- 加载动画 --> <!-- 加载动画 -->
<LoadingSpinner /> <LoadingSpinner />
<p>{{ $t('loading') }}...</p> <p>{{ $t('loading') }}...</p>