Vue: 组件需要根据后台来决定排列顺序(附带锚点跳转)

您所在的位置:网站首页 顺序排列组合怎么设置数据 Vue: 组件需要根据后台来决定排列顺序(附带锚点跳转)

Vue: 组件需要根据后台来决定排列顺序(附带锚点跳转)

2024-07-10 10:41| 来源: 网络整理| 查看: 265

在日常开发中,有时我们一个页面中需要有很多小类别的版块。一般我们可以将每一个小类别版块可以写成一个个组件。这样的话顺序上就是被固定死了,如何业务需要修改顺序还得由前端人员修改,再打包,最后发布。这样无疑会大大的浪费人力,增加没有意义的时长。

那么,我们可以用到什么方法来解决这个问题呢?

这时我们可以使用 vue 官网当中 API 里面的 component(元组件)

在这里插入图片描述

通过这里 我们可以根据 is 的值来决定显示哪些组件。(这里我们需要将所有的组件名通过后台接口来返回给前端,后台设置显示顺序)

在此之外,还需要用到点击 header部分 跳转到相对应的组件。

goAnchor(id) { // id是header导航 后台返回的id this.isActive = id; // 用来点击导航添加样式 let target = document.querySelector("#header-" + id); // 根据元组件中的 :id 来寻找相对应的组件 let top = target.offsetTop; let menuBarHeight = document.querySelector("#boxFixed").clientHeight; // 获取导航栏高度 let scrollTop = top - menuBarHeight; let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 let isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器 // if语句用来兼容scrollTop在低版本ie浏览器以及主流浏览器 if (!!window.ActiveXObject || "ActiveXObject" in window) { document.documentElement.scrollTop = scrollTop; } else if (isEdge) { document.body.scrollTop = scrollTop; } else { window.removeEventListener("scroll", 调用获取组件并设置滚动的方法); // 移除监听 window.scrollTo({ // 这里如果使用 scrollintoview 的话会受到 fixed 的影响 top: top - menuBarHeight, behavior: "smooth" // 平滑滚动 }); window.onscroll = e => { let currentScrollOffset = window.pageYOffset || document.documentElement.scrollTop; if (currentScrollOffset === top - menuBarHeight) { window.addEventListener("scroll", 调用获取组件并设置滚动的方法); } }; } }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3