本文主要是介绍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 · 前端押题宝典 · 看云
2.2方案二:
待完善
这篇关于uni-appH5项目实现导航区域与内容区域联动效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!