|
|
@@ -4,7 +4,7 @@
|
|
|
<text class="nav-bar-title">学习</text>
|
|
|
</view>
|
|
|
<!-- 吸顶单元标题 -->
|
|
|
- <ezyActiveVue
|
|
|
+ <!-- <ezyActiveVue
|
|
|
v-if="currentStickyTitle &&existData"
|
|
|
class="item-dy-box item-fixed"
|
|
|
@aclick="handleClickDanyuan(currentDanyuanId)"
|
|
|
@@ -18,7 +18,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </ezyActiveVue>
|
|
|
+ </ezyActiveVue> -->
|
|
|
|
|
|
<!-- 滚动区域 -->
|
|
|
<scroll-view
|
|
|
@@ -56,12 +56,10 @@
|
|
|
<!-- <view class="xx-item-title">— 以下为当前等级课程目录 —</view> -->
|
|
|
|
|
|
<view v-for="(danyuanItem, index) in danyuanList" :key="danyuanItem.danyuanId">
|
|
|
-
|
|
|
<!-- 单元标题(带唯一ID,用于位置查询) -->
|
|
|
- <view class="xx-item-title" :id="`title-${danyuanItem.danyuanId}`">
|
|
|
+ <view class="xx-item-title" @click="handleClickDanyuan(danyuanItem.danyuanId)" :id="`title-${danyuanItem.danyuanId}`">
|
|
|
— {{ danyuanItem.danyuanName }} {{ danyuanItem.danyuanIntro }} —
|
|
|
</view>
|
|
|
-
|
|
|
<!-- 节列表 -->
|
|
|
<ezyActiveVue
|
|
|
class="ezy-list-item-active xx-item-box"
|
|
|
@@ -207,9 +205,9 @@
|
|
|
this.curProcess = cacheData.curProcess;
|
|
|
this.danyuanList = [...(cacheData.danyuanList || [])];
|
|
|
this.banbenId = cacheData.banbenId
|
|
|
- this.$nextTick(() => {
|
|
|
- this.updateTitlePositions();
|
|
|
- });
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.updateTitlePositions();
|
|
|
+ // });
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -252,9 +250,9 @@
|
|
|
this.dengjiId = res.data.dengjiId
|
|
|
this.chanpinId = res.data.chanpinId
|
|
|
// 数据加载完成后初始化观察器
|
|
|
- this.$nextTick(() => {
|
|
|
- this.updateTitlePositions();
|
|
|
- });
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.updateTitlePositions();
|
|
|
+ // });
|
|
|
}
|
|
|
}).catch(res => {
|
|
|
cacheManager.remove("xuexi-shuxue");
|
|
|
@@ -262,83 +260,83 @@
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- updateStickyHeight() {
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query.select('.item-fixed').boundingClientRect(res => {
|
|
|
- if (res) {
|
|
|
- this.stickyHeight = res.height; // 单位 px
|
|
|
- } else {
|
|
|
- this.stickyHeight = 100; // 默认 fallback(约 200rpx = 100px)
|
|
|
- }
|
|
|
- }).exec();
|
|
|
- },
|
|
|
+ // updateStickyHeight() {
|
|
|
+ // const query = uni.createSelectorQuery().in(this);
|
|
|
+ // query.select('.item-fixed').boundingClientRect(res => {
|
|
|
+ // if (res) {
|
|
|
+ // this.stickyHeight = res.height; // 单位 px
|
|
|
+ // } else {
|
|
|
+ // this.stickyHeight = 100; // 默认 fallback(约 200rpx = 100px)
|
|
|
+ // }
|
|
|
+ // }).exec();
|
|
|
+ // },
|
|
|
|
|
|
// 获取所有标题在 scroll-view 中的绝对位置
|
|
|
- updateTitlePositions() {
|
|
|
- this.titlePositions = [];
|
|
|
- this.danyuanTitleRefs = [];
|
|
|
-
|
|
|
- if (!this.danyuanList.length) return;
|
|
|
-
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- this.danyuanList.forEach(item => {
|
|
|
- query.select(`#title-${item.danyuanId}`).boundingClientRect();
|
|
|
- this.danyuanTitleRefs.push(item);
|
|
|
- });
|
|
|
-
|
|
|
- query.exec((rects) => {
|
|
|
- rects.forEach((rect, index) => {
|
|
|
- if (rect) {
|
|
|
- // 在 scroll-view 初始未滚动时,rect.top 就是内容中的绝对 top
|
|
|
- this.titlePositions.push({
|
|
|
- danyuanId: this.danyuanTitleRefs[index].danyuanId,
|
|
|
- name: this.danyuanTitleRefs[index].danyuanName,
|
|
|
- intro: this.danyuanTitleRefs[index].danyuanIntro,
|
|
|
- top: rect.top
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- this.titlePositions.sort((a, b) => a.top - b.top);
|
|
|
- // 👇 新增:更新吸顶栏高度
|
|
|
- this.updateStickyHeight();
|
|
|
- });
|
|
|
- },
|
|
|
+ // updateTitlePositions() {
|
|
|
+ // this.titlePositions = [];
|
|
|
+ // this.danyuanTitleRefs = [];
|
|
|
+
|
|
|
+ // if (!this.danyuanList.length) return;
|
|
|
+
|
|
|
+ // const query = uni.createSelectorQuery().in(this);
|
|
|
+ // this.danyuanList.forEach(item => {
|
|
|
+ // query.select(`#title-${item.danyuanId}`).boundingClientRect();
|
|
|
+ // this.danyuanTitleRefs.push(item);
|
|
|
+ // });
|
|
|
+
|
|
|
+ // query.exec((rects) => {
|
|
|
+ // rects.forEach((rect, index) => {
|
|
|
+ // if (rect) {
|
|
|
+ // // 在 scroll-view 初始未滚动时,rect.top 就是内容中的绝对 top
|
|
|
+ // this.titlePositions.push({
|
|
|
+ // danyuanId: this.danyuanTitleRefs[index].danyuanId,
|
|
|
+ // name: this.danyuanTitleRefs[index].danyuanName,
|
|
|
+ // intro: this.danyuanTitleRefs[index].danyuanIntro,
|
|
|
+ // top: rect.top
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // this.titlePositions.sort((a, b) => a.top - b.top);
|
|
|
+ // // 👇 新增:更新吸顶栏高度
|
|
|
+ // this.updateStickyHeight();
|
|
|
+ // });
|
|
|
+ // },
|
|
|
|
|
|
handleScroll(e) {
|
|
|
const scrollTop = e.detail.scrollTop;
|
|
|
- const firstTitle = this.titlePositions[0];
|
|
|
-
|
|
|
- if (!firstTitle) {
|
|
|
- this.currentStickyTitle = '';
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 👇 关键修改:提前触发吸顶
|
|
|
- const triggerOffset = scrollTop + this.stickyHeightPx;
|
|
|
-
|
|
|
- // 如果还没滚到第一个标题的顶部(考虑吸顶高度),则隐藏
|
|
|
- if (triggerOffset < firstTitle.top) {
|
|
|
- this.currentStickyTitle = '';
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 找出最后一个 top <= triggerOffset 的标题(即刚进入吸顶区的单元)
|
|
|
- let matched = null;
|
|
|
- for (let i = this.titlePositions.length - 1; i >= 0; i--) {
|
|
|
- if (this.titlePositions[i].top <= triggerOffset) {
|
|
|
- matched = this.titlePositions[i];
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- console.log('matched',matched);
|
|
|
- if (matched) {
|
|
|
- this.currentStickyTitle = matched.name;
|
|
|
- this.currentStickyIntro = matched.intro;
|
|
|
- this.currentDanyuanId = matched.danyuanId;
|
|
|
- this.currentStickyDengjiId = this.banbenInfo.dengjiId || 1;
|
|
|
- } else {
|
|
|
- this.currentStickyTitle = '';
|
|
|
- }
|
|
|
+ // const firstTitle = this.titlePositions[0];
|
|
|
+
|
|
|
+ // if (!firstTitle) {
|
|
|
+ // this.currentStickyTitle = '';
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 👇 关键修改:提前触发吸顶
|
|
|
+ // const triggerOffset = scrollTop + this.stickyHeightPx;
|
|
|
+
|
|
|
+ // // 如果还没滚到第一个标题的顶部(考虑吸顶高度),则隐藏
|
|
|
+ // if (triggerOffset < firstTitle.top) {
|
|
|
+ // this.currentStickyTitle = '';
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 找出最后一个 top <= triggerOffset 的标题(即刚进入吸顶区的单元)
|
|
|
+ // let matched = null;
|
|
|
+ // for (let i = this.titlePositions.length - 1; i >= 0; i--) {
|
|
|
+ // if (this.titlePositions[i].top <= triggerOffset) {
|
|
|
+ // matched = this.titlePositions[i];
|
|
|
+ // break;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // console.log('matched',matched);
|
|
|
+ // if (matched) {
|
|
|
+ // this.currentStickyTitle = matched.name;
|
|
|
+ // this.currentStickyIntro = matched.intro;
|
|
|
+ // this.currentDanyuanId = matched.danyuanId;
|
|
|
+ // this.currentStickyDengjiId = this.banbenInfo.dengjiId || 1;
|
|
|
+ // } else {
|
|
|
+ // this.currentStickyTitle = '';
|
|
|
+ // }
|
|
|
},
|
|
|
|
|
|
getJieAndDanyuan(data, jieId) {
|
|
|
@@ -409,6 +407,7 @@
|
|
|
this.saveAndNavigate(jieId, da.type, da, code);
|
|
|
},
|
|
|
handleClickDanyuan(danyuanId) {
|
|
|
+
|
|
|
if (!danyuanId) {
|
|
|
toast("danyuanId丢失")
|
|
|
return false
|
|
|
@@ -428,14 +427,14 @@
|
|
|
|
|
|
// 计算吸顶栏下方的偏移(确保内容不被遮挡)
|
|
|
computed: {
|
|
|
- stickyHeightPx() {
|
|
|
- // 175rpx ≈ 87.5px,取整 90px 足够安全
|
|
|
- return 90;
|
|
|
- },
|
|
|
- topOffset() {
|
|
|
- // 只有当吸顶栏显示时,才增加上边距避免内容被遮挡
|
|
|
- return this.currentStickyTitle ? '80rpx' : '0rpx';
|
|
|
- }
|
|
|
+ // stickyHeightPx() {
|
|
|
+ // // 175rpx ≈ 87.5px,取整 90px 足够安全
|
|
|
+ // return 90;
|
|
|
+ // },
|
|
|
+ // topOffset() {
|
|
|
+ // // 只有当吸顶栏显示时,才增加上边距避免内容被遮挡
|
|
|
+ // return this.currentStickyTitle ? '80rpx' : '0rpx';
|
|
|
+ // }
|
|
|
|
|
|
}
|
|
|
}
|