chore(harmony): 清理 mescroll 鸿蒙适配的调试日志
移除 components/mescroll/* 与 pages_goods/public/js/list.js 中所有 [mescroll-uni][HARMONY] / [my-list-mescroll][HARMONY] 调试日志。 保留功能性修复:watcher 触发首屏 resetUpScroll、isInit 提前为 true、 slot :key 强制重建、首次加载 300ms 延迟、setClientHeight data.height>0 校验与 10 次重试。
This commit is contained in:
@@ -281,10 +281,13 @@
|
||||
.select('#' + this.viewId);
|
||||
view.boundingClientRect(data => {
|
||||
this.isExec = false;
|
||||
if (data) {
|
||||
// 鸿蒙下 scroll-view 首次 layout 未完成时 data.height 可能为 0,
|
||||
// 这种"假性成功"必须归入未拿到,触发重试,否则 clientHeight 永远卡在 0
|
||||
if (data && data.height > 0) {
|
||||
this.mescroll.setClientHeight(data.height);
|
||||
} else if (this.clientNum != 3) {
|
||||
// 极少部分情况,可能dom还未渲染完毕,递归获取,最多重试3次
|
||||
this.clientNum = null; // 成功一次,重置重试计数,后续业务可再次触发
|
||||
} else if (this.clientNum == null || this.clientNum < 10) {
|
||||
// 极少部分情况,可能dom还未渲染完毕,递归获取,最多重试10次
|
||||
this.clientNum = this.clientNum == null ? 1 : this.clientNum + 1;
|
||||
setTimeout(() => {
|
||||
this.setClientHeight();
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
|
||||
<!-- 鸿蒙下不要用 v-if="isInit",会导致内层 mescroll 创建被严重延迟,先 onReady 后 inner created -->
|
||||
<mescroll
|
||||
v-if="isInit"
|
||||
:top="top"
|
||||
:down="downOption"
|
||||
:fixed="fixed"
|
||||
@@ -14,8 +14,10 @@
|
||||
@emptyclick="emptyClick"
|
||||
@init="mescrollInit"
|
||||
>
|
||||
<!-- 数据列表 -->
|
||||
<slot name="list"></slot>
|
||||
<!-- 数据列表 - 鸿蒙下用 key 强制重建 slot DOM,绕过 ArkUI slot 响应式失效问题 -->
|
||||
<view :key="listSlotKey">
|
||||
<slot name="list"></slot>
|
||||
</view>
|
||||
</mescroll>
|
||||
</template>
|
||||
|
||||
@@ -45,7 +47,10 @@ export default {
|
||||
onScroll: true
|
||||
},
|
||||
scrollY: 0,
|
||||
isInit: false
|
||||
// 鸿蒙下直接初始化为 true,避免 v-if 阻塞子组件创建导致 onReady 先于 inner mounted
|
||||
isInit: true,
|
||||
// 鸿蒙下用来强制重建 slot DOM 的 key
|
||||
listSlotKey: 0
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -69,11 +74,43 @@ export default {
|
||||
},
|
||||
created() {
|
||||
if (this.size) this.upOption.page.size = this.size;
|
||||
this.isInit = true;
|
||||
// 鸿蒙下 ArkUI 对 slot 内 Vue 响应式更新失效,数据加载后强制重建 slot DOM
|
||||
// 通过把 listSlotKey 自增,使 :key 变化,触发整个 slot 子树销毁重建
|
||||
const oldUpCallback = this.upCallback;
|
||||
this.upCallback = function() {
|
||||
const ret = oldUpCallback.apply(this, arguments);
|
||||
// 数据回来后 200ms 自增 key,强制 slot DOM 重建
|
||||
setTimeout(() => {
|
||||
this.listSlotKey = (this.listSlotKey || 0) + 1;
|
||||
}, 200);
|
||||
return ret;
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.mescroll.resetUpScroll();
|
||||
this.listenRefresh();
|
||||
// 统一在 watcher 里触发首屏 resetUpScroll,这里不做任何事情
|
||||
// (H5/微信下 mescroll 已在 mounted 前就绪;鸿蒙下 mounted 时机不可靠,所以都不在这里调)
|
||||
},
|
||||
watch: {
|
||||
// 统一在 mescroll 实例就绪时触发首屏 resetUpScroll
|
||||
// H5/微信下 inner 的 $emit('init') 同步触发,watcher 在 mounted 之前就 fire,正常加载
|
||||
// 鸿蒙下 $emit 被延迟到 onReady 之后,watcher 在那时 fire,也能加载
|
||||
mescroll: {
|
||||
immediate: false,
|
||||
handler(newVal) {
|
||||
if (newVal && typeof newVal.resetUpScroll === 'function') {
|
||||
// 避免重复触发
|
||||
if (this._autoLoadTriggered) return;
|
||||
this._autoLoadTriggered = true;
|
||||
// 等下一个 tick,确保 outer 已挂载、meScroll 内部 setBodyHeight 等已执行
|
||||
setTimeout(() => {
|
||||
if (this.mescroll && typeof this.mescroll.resetUpScroll === 'function') {
|
||||
this.mescroll.resetUpScroll();
|
||||
this.listenRefresh();
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// mescroll组件初始化的回调,可获取到mescroll对象
|
||||
|
||||
@@ -67,7 +67,6 @@ export default {
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/lucky/status',
|
||||
data: {},
|
||||
@@ -275,14 +274,17 @@ export default {
|
||||
|
||||
// #ifdef MP-HARMONY
|
||||
// 鸿蒙下 mescroll 初始化时 setClientHeight 在 slot 内容渲染前执行,测得高度为 0
|
||||
// 数据加载后 scrollTo(0,0) 强制 mescroll 重新测量内容高度并重置滚动位置
|
||||
setTimeout(() => {
|
||||
if (this.$refs.mescroll && this.$refs.mescroll.scrollTo) {
|
||||
this.$refs.mescroll.scrollTo(0, 0);
|
||||
} else if (this.$refs.mescroll && this.$refs.mescroll.mescroll) {
|
||||
this.$refs.mescroll.mescroll.scrollTo(0, 0);
|
||||
// 数据加载后必须主动重新测量容器高度,否则 mescroll 认为容器高度为 0,列表不可见
|
||||
// 注:scrollTo(0,0) 只能重置滚动位置,scrollTop 已是 0 时不会触发 scroll 事件,不会重测
|
||||
// mounted 阶段的重试可能已经耗尽 5 次,这里主动重置 clientNum 让测量重新有机会
|
||||
this.$nextTick(() => {
|
||||
const mescrollUni = this.$refs.mescroll && (this.$refs.mescroll.mescroll || this.$refs.mescroll);
|
||||
if (mescrollUni && typeof mescrollUni.setClientHeight === 'function') {
|
||||
mescrollUni.clientNum = null;
|
||||
mescrollUni.isExec = false;
|
||||
mescrollUni.setClientHeight();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
// #endif
|
||||
|
||||
this.waterfallflow((mescroll.num - 1) * 10);
|
||||
|
||||
Reference in New Issue
Block a user