王露 hace 3 años
padre
commit
b41d6ef402

+ 1
- 1
digital-park-web/digital-park/src/views/index/Index.vue Ver fichero

<product :leadingIndustryArr="leadingIndustryArr"></product> <product :leadingIndustryArr="leadingIndustryArr"></product>
<service></service> <service></service>
<advantage></advantage> <advantage></advantage>
<park-map v-if="address" :address="address"></park-map>
<park-map :address="address"></park-map>
<Footer></Footer> <Footer></Footer>
<slide-nav :navLists="indexTab"></slide-nav> <slide-nav :navLists="indexTab"></slide-nav>
</div> </div>

+ 1
- 1
digital-park-web/digital-park/src/views/index/ParkMap.vue Ver fichero

<template> <template>
<div class="map" id="anchor-map"> <div class="map" id="anchor-map">
<div class="title">园区地图</div> <div class="title">园区地图</div>
<div class="map_box">
<div class="map_box" v-if="address">
<baidu-map <baidu-map
class="bm_view" class="bm_view"
ak="lVaszblsq2WBpnFMLDKM3eacxoDGKYf1" ak="lVaszblsq2WBpnFMLDKM3eacxoDGKYf1"

+ 7
- 9
digital-park-web/digital-park/src/views/index/SlideNav.vue Ver fichero

//这里存放数据 //这里存放数据
return { return {
moveIndex: 0, //当前激活nav栏高亮显示标题的下标 moveIndex: 0, //当前激活nav栏高亮显示标题的下标
ContentHeightList: null, //页面中每一栏内容的高度数组
contentHeightList: null, //页面中每一栏内容的高度数组
}; };
}, },
//监听属性 类似于data概念 //监听属性 类似于data概念
// 获得他们的父元素节点 // 获得他们的父元素节点
let pageScroll = document.querySelector(".slide_nav").parentNode; let pageScroll = document.querySelector(".slide_nav").parentNode;
let arr = []; let arr = [];
// console.log(this.navLists.length);
// 将所有子元素的高度放入arr // 将所有子元素的高度放入arr
for (let i = 0; i < this.navLists.length; i++) { for (let i = 0; i < this.navLists.length; i++) {
// 把所有获得到的子元素高度都放入arr中 // 把所有获得到的子元素高度都放入arr中
} }
// 给这个arr兜底,这样可以解决最后一个内容栏监听不到的bug,注意:如果最后一栏内容高度低于滚动条当前的高度,也不会高亮显示最后一栏的标题哦 // 给这个arr兜底,这样可以解决最后一个内容栏监听不到的bug,注意:如果最后一栏内容高度低于滚动条当前的高度,也不会高亮显示最后一栏的标题哦
arr.push(Number.MAX_VALUE); arr.push(Number.MAX_VALUE);
this.ContentHeightList = arr;
this.contentHeightList = arr;
}, },
// 监听滚轮 // 监听滚轮
handleScroll() { handleScroll() {
// 获得当前的滚轮高度 // 获得当前的滚轮高度
var scrollTop = var scrollTop =
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let Heights = this.ContentHeightList;
// 只有ContentHeightList存在才监听当前高度
if (this.ContentHeightList) {
// console.log(scrollTop);
let Heights = this.contentHeightList;
// 只有contentHeightList存在才监听当前高度
if (this.contentHeightList) {
for (let i = 0; i < Heights.length; i++) { for (let i = 0; i < Heights.length; i++) {
// 如果滚轮高度大于当前所在的子元素高度 并且 滚轮高度小于下一个子元素的高度 ,那么说明滚轮在当前内容中,就激活当前的nav栏 // 如果滚轮高度大于当前所在的子元素高度 并且 滚轮高度小于下一个子元素的高度 ,那么说明滚轮在当前内容中,就激活当前的nav栏
if (scrollTop >= Heights[i] && scrollTop <= Heights[i + 1]) { if (scrollTop >= Heights[i] && scrollTop <= Heights[i + 1]) {
// console.log(i); // console.log(i);
// 那么就激活当前的nav栏 // 那么就激活当前的nav栏
this.moveIndex = i; this.moveIndex = i;
// return false;
return false;
} }
} }
} }
this.getChildrenHeigh(); this.getChildrenHeigh();
}, },
destroyed() { destroyed() {
this.ContentHeightList = null;
this.contentHeightList = null;
window.removeEventListener("scroll", this.handleScroll, true); window.removeEventListener("scroll", this.handleScroll, true);
}, },
}; };

Cargando…
Cancelar
Guardar