vue实现侧边定位栏

本文实例为大家分享了vue实现侧边定位栏的具体代码，供大家参考，具体内容如下

实现思路：

1.通过点击侧边栏，定位到响应的内容
2.滑动滑动栏，侧边栏同步高亮对应的item

效果图如下：

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

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

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

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

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

2.clientHeight 视区的高度

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

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

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

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

页面代码

// 页面组件代码

    
    

      
      

        
        
        
        
        
      
    

//  获取组件距离页面顶部高度 ！！！
 

侧边栏实现代码

// 侧边栏代码


// 侧边栏js

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;
          }
        }
      }
    },
  },
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。