uni-appH5项目实现导航区域与内容区域联动效果

本文主要是介绍uni-appH5项目实现导航区域与内容区域联动效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、需求描述

将导航区域与内容区域实现联动，即点击导航区域，内容区滚动到对应位置，内容区滚动过程中根据内容定位到相对应的导航栏。

效果如下：

侧边导航与内容联动效果

二、功能实现思路分析汇总：

三、具体代码

1、功能一

右侧内容区scroll-view的scroll-into-view属性绑定id,当触发左侧导航2的点击事件时设置subjectId的值，从而实现滚动到对应区域。

 <!-- 右侧内容区 --><scroll-view:scroll-y="true"scroll-with-animation:scroll-into-view="subjectId"class="deep-right"@scroll="scrolling"><viewv-for="(subject, index) in subjectList":id="'subject' + index":key="index"class="subject-con"><viewv-for="(son, i) in subject.sonList":key="i"class="subject-item"@click="goToDetail(son)"><view>{{ son.code }}</view><view>{{ son.name }}</view></view></view></scroll-view>

  const subjectId = ref(''); //scroll-into-view 绑定值const navChange = (index: any) => { // 点击左侧导航栏触发navAvtive.value = index;subjectId.value = 'subject' + index;};

2、功能二

2.1、方案一

滚动方法中，获取各个块级元素距离视口顶部的距离Top1,获取导航区域1距离视口顶部的距离Top2，将Top1与Top2比较，Top1<Top2即代表块级元素滚动到导航1的下方了。

 const scrolling = (e: any) => {//subjectList 是右侧内容区的数据subjectList.value.forEach((item, index) => {//动态循环判断 Top1和Top2 的大小,将比较过程封装成方法调用if (isInViewport(document.getElementById(`subject${index}`))) {if (slideNavList.value) {// 因为我这里左侧导航是封装的子组件，因此调用左侧导航组件的setTabActive方法，修改导航激活tabslideNavList.value.setTabActive(index);}}});};

动态比较过程的方法封装

 const isInViewport = (element: any) => {//getBoundingClientRect() JS的方法，用于获取元素位置和尺寸// careerMap-nav 是顶部横向导航1块元素的Idconst rect = element.getBoundingClientRect();return (Math.abs(rect.top) <=document.getElementById('careerMap-nav')?.getBoundingClientRect()?.bottom //careerMap-nav 元素下边界相对于视口顶部的距离);};

Js中的getBoundingClientRect · 前端押题宝典 · 看云getBoundingClientRect()方法相关指路：Js中的getBoundingClientRect · 前端押题宝典 · 看云