测导航新加两个

digital-park-web/digital-park/src/views/index/Index.vue

@@ -11,7 +11,7 @@
             <park-map :address="address"></park-map>
             <ParkCard :name="'surroundingFacilities'" :data="surroundingFacilities" />
             <Footer></Footer>
-            <slide-nav :navLists="indexTab"></slide-nav>
+            <slide-nav :navLists="indexTab" v-if="navShow"></slide-nav>
         </div>
     </div>
 </template>
@@ -51,6 +51,11 @@ export default {
                     anchorName: "produce",
                     imgUrl: require("@assets/image/index/icon_produce.png"),
                 },
+                {
+                    name: "发展方向",
+                    anchorName: "developmentDirection",
+                    imgUrl: require("@assets/image/index/icon_fangxiang.png"),
+                },
                 {
                     name: "主导产业",
                     anchorName: "product",
@@ -71,6 +76,11 @@ export default {
                     anchorName: "map",
                     imgUrl: require("@assets/image/index/icon_map.png"),
                 },
+                {
+                    name: "周边配套",
+                    anchorName: "surroundingFacilities",
+                    imgUrl: require("@assets/image/index/icon_zhoubian.png"),
+                },
             ],
             parkInfo: null,
             leadingIndustryArr: [],
@@ -79,6 +89,7 @@ export default {
             industrialOrientation: null,
             // 周边配套
             surroundingFacilities: null,
+            navShow:false,
         };
     },
     computed: {},
@@ -95,7 +106,7 @@ export default {
                         this.parkInfo = res.data.data[0];
                         this.address = {
                             lng: this.parkInfo.map.lng,
-                            lat: this.parkInfo.map.lat,
+                            lat: this.parkInfo.map.lat,  
                         };
                         this.leadingIndustryArr =
                             this.parkInfo.leadingIndustryList;
@@ -103,6 +114,7 @@ export default {
                             this.parkInfo.industrialOrientation;
                         this.surroundingFacilities =
                             this.parkInfo.surroundingFacilities;
+                        this.navShow = true;
                     } else {
                         this.$message.error(`获取数据失败,请刷新重试！`);
                     }

digital-park-web/digital-park/src/views/index/SlideNav.vue

@@ -40,9 +40,9 @@ export default {
         itemClick(index) {
             // 获取父元素的dom元素
             let pageScroll = document.querySelector(".slide_nav").parentNode;
-            // console.log(pageScroll.children[index].offsetTop + 520);
+            console.log(index,'in');
             // 激活当前高亮nav栏
-            this.moveIndex = index;
+            // this.moveIndex = index;
             // 点击后滚动到相应的区域
             window.scrollTo({
                 top: pageScroll.children[index].offsetTop, //举例：用户点击 第二个标签后 页面就会滚动到第二个标签的高度
@@ -57,7 +57,7 @@ export default {
             // 将所有子元素的高度放入arr
             for (let i = 0; i < this.navLists.length; i++) {
                 // 把所有获得到的子元素高度都放入arr中
-                arr.push(pageScroll.children[i].offsetTop);
+                arr.push(pageScroll.children[i].offsetTop);   
             }
             // 给这个arr兜底，这样可以解决最后一个内容栏监听不到的bug，注意：如果最后一栏内容高度低于滚动条当前的高度，也不会高亮显示最后一栏的标题哦
             arr.push(Number.MAX_VALUE);
@@ -65,21 +65,31 @@ export default {
         },
         // 监听滚轮
         handleScroll() {
+            // if(!this.contentHeightList){
+                // 获得内容高度
+                 this.getChildrenHeigh();
+            // }
             // 获得当前的滚轮高度
             var scrollTop =
                 window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
-            let Heights = this.contentHeightList;
             // 只有contentHeightList存在才监听当前高度
             if (this.contentHeightList) {
-                for (let i = 0; i < Heights.length; i++) {
-                    // 如果滚轮高度大于当前所在的子元素高度 并且 滚轮高度小于下一个子元素的高度 ，那么说明滚轮在当前内容中，就激活当前的nav栏
-                    if (scrollTop >= Heights[i] && scrollTop <= Heights[i + 1]) {
-                        // console.log(i);
-                        // 那么就激活当前的nav栏
-                        this.moveIndex = i;
-                        return false;
+                this.contentHeightList.forEach( (el,inx) => {
+                    if(scrollTop >= el && scrollTop <= this.contentHeightList[inx + 1]){
+                        console.log(el,inx);
+                        this.moveIndex = inx;
                     }
-                }
+                })
+                // for (let i = 0; i < Heights.length; i++) {
+                //     console.log(i,'i')
+                //     // 如果滚轮高度大于当前所在的子元素高度 并且 滚轮高度小于下一个子元素的高度 ，那么说明滚轮在当前内容中，就激活当前的nav栏
+                //     if (scrollTop >= Heights[i] && scrollTop <= Heights[i + 1]) {
+                //         // console.log(i,'滚动的i');
+                //         // 那么就激活当前的nav栏
+                //         this.moveIndex = i;
+                //         return false;
+                //     }
+                // }
             }
         },
     },
@@ -89,11 +99,11 @@ export default {
     mounted() {
         // 监听滚动
         window.addEventListener("scroll", this.handleScroll, true);
-        // 获得内容高度
-        this.getChildrenHeigh();
+     
     },
     destroyed() {
         this.contentHeightList = null;
+        
         window.removeEventListener("scroll", this.handleScroll, true);
     },
 };