renkang/ranking_list_h5
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

又优化了一版

Browse Source
This commit is contained in:
17792275749
2025-06-13 17:25:21 +08:00
parent 529d6fa090
commit 9316310d63
1 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/dietaryNutritionTips/dietaryNutritionTips2.vue
+30 -11
View File
@@ -157,6 +157,7 @@ export default {
onTransitionEndHandlerRef: null, // 存储 transitionend 事件处理函数的引用
refRetryCount: 0, // 记录 $refs 获取的重试次数
mutationObserver: null, // MutationObserver 实例
mutationObserverDebounceTimer: null, // MutationObserver 防抖定时器
};
},
created: function () {
@@ -213,17 +214,21 @@ export default {
const config = { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] };
_this.mutationObserver = new MutationObserver((mutationsList) => {
for (let mutation of mutationsList) {
if (mutation.type === 'childList' || mutation.type === 'attributes') {
// 当 `staffContent` 或 `staffList` 相关的 DOM 发生变化时，尝试重新评估是否需要滚动
// 这里只是一个简单的触发机制，实际的滚动逻辑在 startSingleScroll 中处理
if (_this.personnelType === 'staff' && _this.isPageVisible && !_this.isScrolling && _this.list.length > 0) {
// 避免过于频繁的触发，仅在当前没有滚动且有数据时才检查
// 实际的滚动启动在 loadDataSequential 的 nextTick 中
// 此处只做辅助性监控，若发现异常再做处理
// 添加防抖，避免过于频繁的触发
clearTimeout(_this.mutationObserverDebounceTimer);
_this.mutationObserverDebounceTimer = setTimeout(() => {
for (let mutation of mutationsList) {
if (mutation.type === 'childList' || mutation.type === 'attributes') {
// 只有在非滚动状态且页面可见时，才考虑处理 Mutation。
// 这里的逻辑依然是辅助性监控，不直接触发关键流程，减少干扰。
if (_this.personnelType === 'staff' && _this.isPageVisible && !_this.isScrolling && _this.list.length > 0) {
_this.callAndroidPostLog(`MutationObserver 触发 (防抖后)。类型: ${mutation.type}`);
// 实际的滚动启动在 loadDataSequential 的 nextTick 中。
// 此处可以根据需要添加更具体的异常处理或重新评估逻辑。
}
}
}
}
}, 100); // 100ms 防抖
});
if (targetNode) {
@@ -264,6 +269,8 @@ export default {
*/
clearAllTimers: function() {
const _this = this;
_this.callAndroidPostLog(`>>> 清理定时器 | pageChangeTimerId=${_this.pageChangeTimerId} | scrollDelayTimerId=${_this.scrollDelayTimerId} | scrollFallbackTimerId=${_this.scrollFallbackTimerId} | isScrolling=${_this.isScrolling}`);
if (_this.pageChangeTimerId) {
clearTimeout(_this.pageChangeTimerId);
_this.pageChangeTimerId = null;
@@ -279,6 +286,12 @@ export default {
_this.scrollFallbackTimerId = null;
_this.callAndroidPostLog("清除 scrollFallbackTimerId。");
}
if (_this.mutationObserverDebounceTimer) {
clearTimeout(_this.mutationObserverDebounceTimer);
_this.mutationObserverDebounceTimer = null;
_this.callAndroidPostLog("清除 MutationObserver 防抖定时器。");
}
_this.isScrolling = false; // 确保滚动状态被重置
const listWrapperEl = _this.$refs.staffList;
@@ -359,7 +372,7 @@ export default {
.then(
(res) => {
_this.callAndroidPostLog(`请求返回：${JSON.stringify(res)}`);
if (res.success && res.result && res.result.rankList) {
if (res.success && res.result && res.result.rankList && res.result.rankList.length > 0) { // 确保有数据才赋值和滚动
_this.doingDay = res.result.doingDay === null ? "-" : res.result.doingDay;
_this.list = res.result.rankList; // 更新列表数据
_this.callAndroidPostLog(`数据加载成功，列表长度：${_this.list.length}。`);
@@ -412,6 +425,7 @@ export default {
const contentEl = _this.$refs.staffContent; // 滚动容器
const listWrapperEl = _this.$refs.staffList; // 实际滚动的元素
_this.callAndroidPostLog(`>>> 开始滚动 | isScrolling=${_this.isScrolling} | pageChangeTimerId=${_this.pageChangeTimerId} | scrollDelayTimerId=${_this.scrollDelayTimerId} | scrollFallbackTimerId=${_this.scrollFallbackTimerId}`);
_this.callAndroidPostLog("startSingleScroll 被调用。");
if (!_this.isPageVisible) {
@@ -532,7 +546,7 @@ export default {
clearTimeout(_this.scrollFallbackTimerId); // 动画正常完成，清除备用定时器
_this.scrollFallbackTimerId = null;
_this.isScrolling = false;
_this.isScrolling = false; // 动画完成，重置滚动状态
_this.callAndroidPostLog("滚动动画完成。");
// --- 滚动结束后，设置页面切换定时器 ---
@@ -628,6 +642,11 @@ export default {
_this.mutationObserver = null;
_this.callAndroidPostLog("MutationObserver 已断开。");
}
if (_this.mutationObserverDebounceTimer) {
clearTimeout(_this.mutationObserverDebounceTimer);
_this.mutationObserverDebounceTimer = null;
_this.callAndroidPostLog("MutationObserver 防抖定时器在销毁时已清除。");
}
_this.callAndroidPostLog("beforeDestroy 完成。");
},
};