吸顶交互逻辑全解析

页面加载 ↓ getRecommendPosition() 获取 recommendTop // 需要吸顶区域 ↓ 用户滚动页面 ↓ handlePageScroll(scrollTop) ↓ ┌─ isFixed true? ─┐ │ ↓ │ │ ┌─是─┐ ┌─否─┐ │ │ │ │ │ │ │ │ ↓ │ ↓ │ │ │ scrollTop │ scrollTop │ │ recommendTop-50? │ recommendTop? │ │ ↓ │ ↓ │ │ 解吸顶 │ 吸顶 │ │ ↓ │ ↓ │ │ return │ isFixedtrue │ │ │ ↓ │ │ │ return │ │ │ │ └─────────┴───────────┘逻辑梳理一、初始化阶段页面加载时通过uni.createSelectorQuery获取分类导航元素#recommend-section距离视口顶部的距离保存到recommendTop变量中。这个值表示分类导航在页面自然状态下的位置1. 数据定义 (data) // 分类导航吸顶相关 isFixed: false, // 是否固定定位控制是否吸顶 recommendTop: 0, // 分类导航距离顶部的距离 2. 初始化位置 (onLoad) // 获取分类导航距离顶部的距离用于吸顶效果 this.$nextTick(() { this.getRecommendPosition(); }); 3. 获取位置信息 (getRecommendPosition) getRecommendPosition() { // 使用 uni.createSelectorQuery() 获取 #recommend-section 元素距离视口顶部的距离存入 recommendTop。 const query uni.createSelectorQuery().in(this); query .select(#recommend-section) .boundingClientRect((data) { if (data) { this.recommendTop data.top; // 获取元素距离视口顶部的距离 } }) .exec(); },二、吸顶条件当页面滚动时比较当前滚动距离scrollTop与recommendTop的大小。只要scrollTop recommendTop就将isFixed设为true分类导航固定在搜索栏下方4. 滚动监听 (onPageScroll → handlePageScroll) onPageScroll(e) { this.handlePageScroll(e.scrollTop); }, handlePageScroll(scrollTop) { // 如果已经吸顶 if (this.isFixed) { // 当滚动回顶部小于吸顶阈值时解除吸顶 if (scrollTop this.recommendTop - 50) { this.isFixed false; } return; } // 如果还未吸顶检查是否需要吸顶 if (!this.recommendTop) return; // 当滚动距离大于等于分类导航的初始位置时吸顶 if (scrollTop this.recommendTop) { this.isFixed true; } }, 核心逻辑 吸顶条件scrollTop recommendTop 解除条件scrollTop recommendTop - 50向上滚动50px以上才解除三、保持吸顶一旦isFixed变为true滚动监听函数会直接返回不再判断是否需要吸顶或解除吸顶。这样做的目的是防止页面内容变化如切换分类清空列表导致页面回弹时吸顶状态被意外取消。四、解除吸顶当吸顶状态已激活时只有用户向上滚动使scrollTop recommendTop - 50时才将isFixed设为false。预留 50px 的缓冲距离避免频繁切换。五、切换分类点击分类时清空当前列表并加载新数据。如果之前处于吸顶状态切换完成后会重新获取分类导航的位置确保吸顶位置准确。由于吸顶后直接返回列表清空引起的页面回弹不会影响吸顶状态。// 切换分类处理 (goCategory) goCategory(item) { const wasFixed this.isFixed; // 保存吸顶状态 this.currentCategoryId item.id; this.categoryPage 0; this.categoryHasMore true; this.categoryInfoList []; // 清空列表会导致页面回弹 this.loadCategoryData(); // 如果之前是吸顶状态切换分类后重新检查 if (wasFixed) { this.$nextTick(() { this.getRecommendPosition(); }); } }, 问题清空 categoryInfoList 会导致页面内容减少触发页面回弹。但由于吸顶后直接 return所以不会影响 isFixed。六、样式切换通过isFixed控制类名recommend-fixed使分类导航从正常文档流切换为position: fixed并设置合适的top值固定在搜索栏下方。view idrecommend-section classrecommend-section :class{ recommend-fixed: isFixed } .recommend-section.recommend-fixed { position: fixed; top: calc(72rpx 40rpx); // 固定在搜索栏下方 left: 0; right: 0; z-index: 199; margin: 0; padding: 16rpx 18rpx; background: #fffbf5; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08); }