1

pages/chanpinneirong/index.vue

@@ -2,7 +2,7 @@
 	<view class="container">
 		<!-- 当前单元标题（吸顶效果） -->
 		<view class="sticky-title" v-if="currentUnitName">
-			{{ currentUnitName }}
+			 {{ showStickyTitle ? currentUnitName : "学习" }}
 		</view>
 
 		<!-- 返回顶部按钮 -->
@@ -16,9 +16,9 @@
 				<text class="course-name">等级:{{ subjectDetail.dengjiName }}</text>
 				<text class="course-name">版本:{{ subjectDetail.dengjiName }}</text>
 				<text class="course-name">单元:{{ subjectDetail.curDanyuanName }}</text>
-				<progress :percent="20" class="exam-progress-box"
-								stroke-width="10" backgroundColor="#3c7dfd" activeColor="#ffd11c"/>
-									<text class="course-name">继续学习</text>
+				<progress :percent="20" class="exam-progress-box" stroke-width="10" backgroundColor="#3c7dfd"
+					activeColor="#ffd11c" />
+				<text class="course-name">继续学习</text>
 			</view>
 			<!-- 单元列表 -->
 			<view v-for="(unit, index) in danyuanList" :key="unit.danyuanId" :id="'unit-' + index" class="unit-item">
@@ -27,7 +27,7 @@
 					<text class="unit-name">{{ unit.danyuanName }}</text>
 					<text class="unit-intro">{{ unit.danyuanIntro }}</text>
 				</view>
-							<text class="unit-name">{{ unit.danyuanName }}</text>
+				<text class="unit-name">{{ unit.danyuanName }}</text>
 				<!-- 节列表 -->
 				<view v-for="section in unit.jieList" :key="section.jieId" class="section-item">
 					<view class="status" :class="section.wanchengFlag === 1 ? 'completed' : 'uncompleted'">
@@ -68,14 +68,15 @@
 				showBackTop: false,
 				scrollTop: 0,
 				pageCacheKey: 'learn_page_scroll_cache',
-				hasRestoredScroll: false
+				hasRestoredScroll: false,
+				showStickyTitle: false
 			}
 		},
 		components: {
 			CustomTabBar
 		},
 		onShow() {
-		
+
 			console.log('学习页面显示，尝试恢复滚动位置')
 			// 如果没有恢复过，从缓存恢复
 			if (!this.hasRestoredScroll) {
@@ -85,18 +86,18 @@
 
 		// 新增：页面隐藏时保存滚动位置
 		onHide() {
-		
+
 			console.log('学习页面隐藏，保存滚动位置')
 			this.saveScrollPosition()
 		},
 
 		onLoad() {
-			
+
 			this.loadDataFromApi()
 		},
 
 		onReady() {
-		
+
 			// 页面渲染完成后执行
 			setTimeout(() => {
 				this.getUnitPositions();
@@ -120,7 +121,7 @@
 				})
 			},
 
-			// 新增：保存滚动位置到缓存
+			// 保存滚动位置到缓存
 			saveScrollPosition() {
 				if (this.scrollTop > 0) {
 					const scrollData = {
@@ -133,11 +134,12 @@
 				}
 			},
 
-			// 新增：从缓存恢复滚动位置
+			// 从缓存恢复滚动位置
 			restoreScrollPosition() {
 				try {
 					const saved = uni.getStorageSync(this.pageCacheKey)
 					if (saved && saved.scrollTop > 0) {
+						this.showStickyTitle = true
 						// 延迟执行滚动
 						setTimeout(() => {
 							this.scrollTop = saved.scrollTop
@@ -150,10 +152,12 @@
 							this.hasRestoredScroll = true
 
 							// 再次延迟确保滚动生效
-							setTimeout(() => {
-								this.scrollTop = saved.scrollTop + 0.01
-							}, 50)
+							// setTimeout(() => {
+							// 	this.scrollTop = saved.scrollTop + 0.01
+							// }, 50)
 						}, 100)
+					} else {
+						this.showStickyTitle = false
 					}
 				} catch (e) {
 					console.error('读取缓存失败:', e)
@@ -197,13 +201,12 @@
 
 			// 更新当前显示的单元
 			updateCurrentUnit(scrollTop) {
-			
+
 				const query = uni.createSelectorQuery().in(this);
 
 				for (let i = 0; i < this.danyuanList.length; i++) {
 					query.select('#unit-' + i).boundingClientRect();
 				}
-
 				query.exec((res) => {
 					// 添加一个偏移量，让切换更平滑
 					const offset = 80;
@@ -213,7 +216,10 @@
 							// 计算单元在页面中的实际位置（考虑滚动）
 							const unitTop = rect.top + scrollTop;
 							if (scrollTop + offset >= unitTop) {
-								if (i === res.length - 1 || scrollTop + offset < (res[i + 1].top + scrollTop)) {
+								if (i == res.length - 1 || scrollTop + offset < (res[i + 1].top + scrollTop)) {
+									// 每次滚动都设置吸顶标题显示状态
+									this.showStickyTitle = i >= 1
+
 									if (this.currentUnitName !== this.danyuanList[i].danyuanName) {
 										this.currentUnitName = this.danyuanList[i].danyuanName;
 
@@ -238,7 +244,7 @@
 				// 清除缓存
 				uni.removeStorageSync(this.pageCacheKey)
 				this.hasRestoredScroll = false
-
+				this.showStickyTitle = false
 				// 回到顶部
 				this.scrollTop = this.scrollTop + 1; // 先改变值触发重新渲染
 				this.$nextTick(() => {