vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue点击导航栏滚动指定位置

vue实现点击导航栏滚动页面到指定位置的功能(推荐)

作者:阿 湫

这篇文章主要介绍了vue实现点击导航栏滚动页面到指定位置的功能(推荐),步骤一是是通过获取不同板块的滚轮高度,步骤二通过编写执行滚动操作的函数,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下

实现效果

在这里插入图片描述

具体实现步骤

step1:获取不同板块的滚轮高度

当编写好html部分后,我们创建一个可以获取当前滚轮位置的方法handleScroll(),并在mounted钩子函数中添加该方法的监听事件

methods: {
  handleScroll() {
      var scrollTop = document.documentElement.scrollTop;
      this.scrollHeight = scrollTop;
      console.log('当前滚轮高度:',this.scrollHeight); // 使用后记得注释掉哦
  },
},
mounted(){
   window.addEventListener("scroll", this.handleScroll);
}

创建好监听事件后,我们手动滑动网页右侧滚动条到各版块位置,并打印当前板块的滚轮高度

 // 获取到到的各版块滚轮高度
 // area1 scrollHeight == 208.3813934326172
 // area2 scrollHeight == 960.2766723632812
 // area3 scrollHeight == 1637.001708984375
 // area4 scrollHeight == 2305.38330078125

step2:编写执行滚动操作的函数

1、具体思路

  ① 获取到当前滚轮位置后,计算其位置与目标区域位置的高度差 x
  ② 进行 n 次循环,不断减去设定的最小移动单位 dx ,来缩减它们之间的高度差,直至为 0
  ③ 但需要注意的是:因不同位置获取到滚轮的高度不固定,所以 n -1 次减去最小移动单位 dx 后,高度差不一定为零,即 0 < x < dx (此时的高度差:是高度差对最小移动单位取余的余数),所以在执行滚动前,需要先将高度差减去余数,才能保证通过n次循环,刚好能到达指定位置( x = 0)

2、实现方法

  通过定时器进行 n 次循环,高度差不断减去最小移动距离至 0,同时控制滚动条不断靠近目标位置(即向目标位置加/减单位距离)

这里先定义好需要使用的变量

data(){
	return {
	  scrollHeight:0, //当前滚轮高度
      metaHeight:15,  //最小滚动距离
      metaTime: 10,   //最小执行时间
      targetHeight:0,     //目标区域滚轮高度
	}
}

编写滚动方法

 toArea(index) { // 这里的index是左侧导航栏传的参数,是不同区域设定好的索引值
      switch (index) { // 匹配不同区域的滚轮高度
        case 1: //区域一
          this.targetHeight= 208  //这里将第一步获取到的滚轮高度取整
          break;
        case 2: //区域二
          this.targetHeight= 960
          break;
        case 3: //区域三
          this.targetHeight= 1637
          break;
        case 4: //区域四
          this.targetHeight= 2305
          break;
        default: //默认:区域一
          this.targetHeight= 208
          break;
      }
      // 判断执行情况
      // 当指定区域和当前滚动条位置一致时
      if( (document.documentElement.scrollTop===208&&this.targetHeight === 208)||
          (document.documentElement.scrollTop===960&&this.targetHeight === 960)||
          (document.documentElement.scrollTop===1637&&this.targetHeight === 1637))
      {
        console.log('已经到达该区域了哦')
      }
      // 当指定区域高度大于当前滚动条位置时(即目标区在当前滚轮的下方)
      else if(this.targetHeight> this.scrollHeight){
        // 计算高度差
        let x = this.targetHeight- this.scrollHeight;
        // 先加上余数,保证高度差能整除设定的最小移动单位
        document.documentElement.scrollTop += x%this.metaHeight;
        x -= x%this.metaHeight;
        const goto = setInterval(() => { // 建立执行操作的定时器
          document.documentElement.scrollTop  += this.metaHeight; // 控制移动滚动条
          x-= this.metaHeight; // 缩减高度差
          if (x == 0) { // 到达指定位置后清除定时器
            clearInterval(goto); //清除定时器
          }
        }, this.metaTime);
      }
      // 当指定区域高度小于当前滚动条位置时(即目标区在当前滚轮的上方)
      else{
        // 计算高度差
        let x = this.scrollHeight - this.targetHeight;
        // 先减去余数,保证高度差能整除设定的最小移动单位
        document.documentElement.scrollTop -= x%this.metaHeight;
        x -= x%this.metaHeight;
        const goto = setInterval(() => {
          document.documentElement.scrollTop -= this.metaHeight;
          x-= this.metaHeight;
          if (x == 0) {
            clearInterval(goto); //清除定时器
          }
        }, 1);
      }
    },

为导航栏添加点击事件 @click

<div id="leftNavbar" v-show="scrollHeight > 200">
    <div v-for="(item,index) in navBarList" :key="index" :id="item.id" 
    	@click="toArea(item.index)">
        {{ item.title }}
    </div>
</div>
data(){
return {
	 navBarList:
	 [{
          id:"lnb1",
          title:"教育",
          index:1
        },
        {
          id:"lnb2",
          title:"历史",
          index:2
        },
        {
          id:"lnb3",
          title:"风景",
          index:3
        },
        {
          id:"lnb4",
          title:"文创",
          index:4
        }],
}

OK到这里就实现了在页面不同位置点击左侧导航栏,滚动页面到对应板块(指定位置),并可以自定义滚动操作的速度和距离。各位朋友觉得有帮助到您的话,劳烦点个赞赞鼓励一下吧,嘻嘻。

到此这篇关于vue 两步实现点击导航栏,滚动页面到指定位置的功能的文章就介绍到这了,更多相关vue点击导航栏滚动指定位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文