vue实现侧边定位栏

实现思路：

通过点击侧边栏，定位到响应的内容

滑动滑动栏，侧边栏同步高亮对应的item

效果图如下：

1. 通过点击侧边栏，定位到响应的内容

如果是用html的话我们可以用锚点的办法进行定位；
在vue中，我们可以通过获取组件的高度，将滑动栏定位到对应的位置

在进入主题之前我们需要先了解3个关于获取高度的属性

scrollTop 滑动栏中的滑块离视区最顶部的距离

document.documentElement.scrollTop || document.body.scrollTop

clientHeight 视区的高度

document.documentElement.clientHeight || document.body.clientHeight

scrollHeight 滑动栏里面的滑动块的高度

document.documentElement.scrollHeight || document.body.scrollHeight

vue中我们可以通过this.$refs.xxx.$el.offsetTop获取组件距离页面最顶部的距离，通过赋值给document.documentElement.scrollTop选中组件距离页面最顶部的高度，控制滑动框滑到页面对应位置。相关代码如下：

页面代码

// 页面组件代码
<div><btl-header /><div class="reports"><side-bar v-bind="sideBarData" /><div class="main"><live-overview-partref="liveOverview":shopNameOptions="allShopName":dateSelectorData="dateType_0" /><procurenment-alertref="procurenmentAlert":carBrandOptions="carBrandOptions":shopNameOptions="allShopName":dateSelectorData="dateType_2" /><sales-overviewref="salesOverview":shopNameOptions="allShopName":dateSelectorData1="pardsType_0":dateSelectorData2="dateType_1" /><inquiry-dataref="inquiryData":shopNameOptions="allShopName":dateSelectorData="dateType_2" /><transaction-dataref="transactionData":carBrandOptions="carBrandOptions":shopNameOptions="allShopName":qualityOptions="qualityOptions":colorSeries="colorSeries":dateSelectorData="dateType_2" /></div></div>//  获取组件距离页面顶部高度 ！！！<script>
mounted() {// ！！注意，需要页面渲染完才能获取各个盒子的高度this.sideBarData.offsetTopliveOverview = this.$refs.liveOverview.$el.offsetTop;this.sideBarData.offsetTopprocurenmentAlert = this.$refs.procurenmentAlert.$el.offsetTop;this.sideBarData.offsetTopsalesOverview = this.$refs.salesOverview.$el.offsetTop;this.sideBarData.offsetTopinquiryData = this.$refs.inquiryData.$el.offsetTop;this.sideBarData.offsetToptransactionData = this.$refs.transactionData.$el.offsetTop;},</script>

侧边栏实现代码

// 侧边栏代码
<template><hn-card class="sidebar"><ul class="nav-tabs"><liclass="activeTip"ref="activeTip"></li><li@click="clickanchor('liveOverview',0)"class="item":class="active==='liveOverview'?'active':'noActive'">实时总览</li><liclass="item":class="active==='procurenmentAlert'?'active':'noActive'"@click="clickanchor('procurenmentAlert',1)">采购预警</li><liclass="item":class="active==='salesOverview'?'active':'noActive'"@click="clickanchor('salesOverview',2)">销售概览</li><liclass="item":class="active==='inquiryData'?'active':'noActive'"@click="clickanchor('inquiryData',3)">询价数据</li><liclass="item":class="active==='transactionData'?'active':'noActive'"@click="clickanchor('transactionData',4)">交易数据</li><liclass="item":class="active==='top'?'active':'noActive'"@click="clickanchor('top')">返回顶部</li></ul></hn-card>
</template>// 侧边栏js
<script>
methods: {// 点击侧边栏item时触发
// 通过document.documentElement.scrollTop控制滑动栏位置clickanchor(itemName, i) {if (itemName === 'top') {document.documentElement.scrollTop = 0; // 滑动栏位置this.active = itemName;this.$refs.activeTip.style.transform = `translateY(${196}px)`;return;}this.$refs.activeTip.style.transform = `translateY(${i * 39}px)`;document.documentElement.scrollTop = this[`offsetTop${itemName}`];this.active = itemName;},
</script>

2. 滑动滑动栏，侧边栏同步高亮对应的item

通过监听滑动栏滑动，获取滑动块距离页面顶部的高度，和组件距离页面顶部的高度进行对比，反向设置滑动栏的高亮位置；

// 监听滑动栏滚动，通过监听滚动到的位置，到scrollChange() {const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;const windowHeight = document.documentElement.clientHeight || document.body.clientHeight || 0;const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight || 0;const allContentOffsettop = ['offsetTopliveOverview','offsetTopprocurenmentAlert','offsetTopsalesOverview','offsetTopinquiryData','offsetToptransactionData'];if (scrollTop === 0) {if (this.active !== 'top') {this.active = 'top';this.$refs.activeTip.style.transform = `translateY(${196}px)`;}} else if (scrollTop + windowHeight > scrollHeight || scrollTop + windowHeight === scrollHeight) {if (this.active !== 'transactionData') {this.active = 'transactionData';this.$refs.activeTip.style.transform = `translateY(${157}px)`;}} else {for (let i = 0; i < allContentOffsettop.length; i++) {if (this[allContentOffsettop[i]] - 1 > scrollTop) {const contentName = allContentOffsettop[i - 1].replace('offsetTop', '');if (this.active !== contentName) {this.active = contentName;this.$refs.activeTip.style.transform = `translateY(${(i - 1) * 39}px)`;}break;}}}},},
};

vue实现侧边定位栏相关推荐

Vue实现侧边导航栏于Tab页关联
技术栈侧边栏用 Antd tab使用element 效果 <template><div class="main-card"><el-row>& ...
vue + elementui 实现动态侧边导航栏
vue + elementui 实现动态侧边导航栏引言 router 文件夹创建 layout 文件夹 components 创建 SubMenu 文件夹封装动态侧边栏 vuex 中根据权限动态获 ...
简单记录—vue 用js方法实现侧边导航栏联动选择
侧边导航栏有两个功能要实现: 1.选择任意一条页面滚动到指定目录位置 2.页面内容滚动侧边栏跟随一起滚动页面结构部分,根据数据循环写一个ul > li,生成侧边目录 <ul>< ...
vue实现侧边折叠菜单栏手风琴效果
在我们做管理后台亦或是产品流程时,总是需要一个菜单栏或者导航栏来架起我们的产品架构,那么,如何用vue实现侧边折叠导航栏呢?接下来将一一介绍. 请先看效果演示图. 步骤1:先架构整个页面的布局,撰写h ...
vue锚点定位（代码通用） - 总结篇
vue锚点定位(应用场景) 当前页面锚点跨页面锚点 hash模式下的锚点 history模式下的锚点应用前提:(重要的事情,说3+1遍) 任意场景.任意代码.任意框架都能对接! 都能采用! 都能 ...
html中关于侧边导航栏和导航栏的编写
侧边导航栏 <style>.box{width: 50px;height: 50px;background-color: #483957;transition: width .5s,bac ...
js实现，点击侧边导航栏，可以平缓的跳到界面指定位置，同时当界面某个元素在浏览器可视范围的时候，相应的导航栏也显示相应的样式
注:要下载安装好jquery和element-ui "element-ui": "^2.15.8" "jquery": "^3.6 ...
Win10 隐藏左侧边侧栏（导航窗口）中的文件夹
左侧边侧栏(导航窗口)中的文件夹有:"3D对象,视频,图片,文档,下载,音乐,桌面",另外还有一个OneDrive的文件夹.由于比较占据边侧栏空间,所以很有必要将其隐藏起来.那么我 ...
vue---element实现收缩展开的侧边导航栏
需求描述: 如下图,可收缩.可展开的侧边导航栏,当收缩时,鼠标悬停在一级菜单时,出现二级菜单. 解决方法: 设置标志[isCollapse]来控制展开和收缩图标 ...

vue实现侧边定位栏

1. 通过点击侧边栏，定位到响应的内容

2. 滑动滑动栏，侧边栏同步高亮对应的item

vue实现侧边定位栏相关推荐

最新文章

热门文章