您的当前位置:首页基于vue监听滚动事件实现锚点链接平滑滚动的方法
广告

基于vue监听滚动事件实现锚点链接平滑滚动的方法

2023-12-08 来源:菲特宠物网

基于vue监听滚动事件,实现锚点链接平滑滚动

近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品)

小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下):

1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动)2.滚动右边的滚动条,左边对应的显示当前样式3.若从别的页面点击菜品进来该页面,则该菜品为指定效果

小编也是vue的初学者,在阅读了大量的文章后,其中借鉴//www.gxlcms.com/article/110325.htm 该文章,收到了很多启发后,结合我们的功能加以完善。小编的和借鉴的文章侧重点不同,建议大家在看之前可以先看一下上面的,以便于梳理的更清楚。

:scrollTop(滚动之根本)

在初写项目的尝试过程中,小编一直改变的是document.body.scrollTop的值来实现滚动,但是后来逐渐发现很邪门,有时给其赋值并没有作用,而且过程也很麻烦,又查阅了一些资料也没有解决办法,所以不得已放弃。

之后无意中看到:scrollTop, 便尝试开始使用vue中的属性直接进行绑定滚动的变量值,功能实现反而简单了。下面详细讲述:

一、组件html结构:

结构布局很简单,在此多说是想给大家讲述清楚一点儿右边菜品的结构,方便绑定:scrollTop属性,小编就踩了这个坑...

注意看注释::scrollTop 的位置改变菜品列表的scrollTop值,来实现相应的滚动

二、实现锚链接平滑滚动

该功能是参考之前博主的文章的,方法基本没改什么,简单易懂,直接放代码

jump(index){ const cateItem = document.querySelectorAll('.cate-item'); let total = cateItem[index].offsetTop; let distance = this.container.scrollTop // 获取到顶部的距离(this.container便是.cate-list,为了方便存起来了) let step = total / 50; this.isActive = index; // 菜单列表显示当前样式 const _this = this; if (total > distance) { smoothDown() } else { let newTotal = distance - total step = newTotal / 50 smoothUp() } function smoothDown () { if (distance < total) { distance += step _this.scrollTop = distance; setTimeout(smoothDown, 10); } else { _this.scrollTop = total } } function smoothUp () { if (distance > total) { distance -= step _this.scrollTop = distance setTimeout(smoothUp, 10) } else { _this.scrollTop = total } } }

三、监听滚动事件,修改锚点状态

在vue中钩子函数监听菜品列表(this.container)的滚动事件,

 mounted(){ // 监听scroll事件 const _this = this; setTimeout(function(){ _this.currentStick(); const rightItem = document.querySelectorAll('.cate-item'); const catelist = document.querySelectorAll('.cate-list')[0]; var length = rightItem.length; var height = rightItem[length-1].offsetHeight; var scrollHeight = document.querySelectorAll('.cate-menu-wrapper')[0].offsetHeight; // 设置最后一个类别菜品列表的高度(小于适配器高度的话与适配器等高),不然点击锚点不能够置顶 if(height < scrollHeight){ rightItem[length-1].style.height = scrollHeight+'px'; } var arr =[]; rightItem.forEach(function(v, i){ arr.push({top: v.offsetTop, height: v.offsetHeight, index: i}); }) _this.itemVal = arr; const cateList = document.querySelectorAll('.cate-list')[0]; cateList.addEventListener('scroll', _this.onScroll); _this.container = cateList; }, 500) },

这里写的有点啰嗦了,设置setTimeout延迟是为了能够获取到元素(谁有好办法快推荐给我),为了在滚动中能够对应列表显示锚点当前状态,存了一个数据itemAll,存了该菜品类别区域的scrollTop,索引,高度。(啰嗦,太啰嗦了)

methods: { onScroll () { var _this = this; _this.itemVal.forEach(function(obj, i){ _this.scrollTop = _this.container.scrollTop; if(_this.scrollTop >= obj.top && _this.scrollTop < (obj.top + obj.height-10)){ // scrollTop的移动位置要在类别的菜品列表中才显示对应锚点的当前状态 _this.isActive = obj.index; } }) },}

三、点击菜品进入页面,该菜品置顶的联动效果(该功能其实有隐藏性的bug,我们项目已取消该功能)

currentStick(){ const {dishId} = this.$route.query; const cateContent = document.querySelectorAll('.cate-content'); const _this = this; cateContent.forEach(function(v, i){ if(v.id == dishId){ _this.scrollTop = v.offsetTop; } }) },

该功能用:scrollTop绑定的话便简单了许多,之前用document.body.scrollTop 设置值一直没有作用。

好了,基本上所有的代码都帖出来了,说的应该也详细吧(我尽力了),该方法感觉其实还是在操作dom元素和js,枉用vue。但是一时也没有更好的办法来实现。

小编还为您整理了以下内容,可能对您也有帮助:

vue监听指定区域的滚动,以及设置滚动值

这个方法适用于顶部固定这种不是全页面在滚动的情况,只需要监听指定的位置滚动就能触发想要的效果。

主要就是用到ref和@scroll

ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素

@scroll可以监听滚动事件

因为我绑定名字是Box,所以就用这个this.$refs.Box来指定dom进行操作,这里我让他滚回到了顶部。

希望对你有所帮助!

vue监听指定区域的滚动,以及设置滚动值

这个方法适用于顶部固定这种不是全页面在滚动的情况,只需要监听指定的位置滚动就能触发想要的效果。

主要就是用到ref和@scroll

ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素

@scroll可以监听滚动事件

因为我绑定名字是Box,所以就用这个this.$refs.Box来指定dom进行操作,这里我让他滚回到了顶部。

希望对你有所帮助!

vue中获取滚动高度或指定滚动到某位置

1.点击某个标签,滚动到某个具体位置

    switchHeight(num) {

        this.selectNum = num;

        if (num == 0) {

          document.getElementById("identifer_one").scrollIntoView();

        } else {

          document.getElementById("hotel_two").scrollIntoView();

        }

      },

2.获取滚动高度,

 首先要先写监听事件:

  mounted() {

      window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件

    },

处理监听事件:e.target.scrollTop是目标对象的滚动高度

handleScroll(e) {

        let serviceTop = 44;

        let hotelTop = 344;

        if (e.target.scrollTop > 44 && e.target.scrollTop < 344) {

          this.selectNum = 0;

        }

        if (e.target.scrollTop > 344) {

          this.selectNum = 1;

        }

      }

    },

vue列表数据如何滚动刷新十条

要实现Vue列表数据的滚动刷新十条,可以借助Vue的计算属性和监听滚动事件来实现。首先,在Vue的数据中定义一个变量来表示当前已加载的数据条数,比如`loadedItems`,初始值为0。然后,在模板中使用`v-for`指令来遍历列表数据,并通过计算属性来遍历的条数为`loadedItems + 10`。接着,在mounted钩子函数中监听滚动事件,当滚动到页面底部时,将`loadedItems`的值加上10,即可触发计算属性的更新,实现滚动刷新十条数据。

原因解释:通过监听滚动事件,可以实时监测用户的滚动行为,当滚动到页面底部时,就可以触发加载新的数据的操作。而通过计算属性,我们可以动态地控制遍历数据的条数,从而实现滚动刷新十条的效果。

拓展内容:除了上述的方法外,还可以考虑使用第三方插件或库来实现滚动刷新十条数据,比如使用Vue-Infinite-Scroll插件。该插件可以方便地实现无限滚动加载数据的功能,只需简单配置即可。此外,还可以考虑使用分页加载的方式,将列表数据按照页码进行划分,每次滚动到底部时加载下一页的数据,从而实现滚动刷新十条数据的效果。

菲特宠物网还为您提供以下相关内容希望对您有帮助:

vue监听指定区域的滚动,以及设置滚动值

这个方法适用于顶部固定这种不是全页面在滚动的情况,只需要监听指定的位置滚动就能触发想要的效果。主要就是用到ref和@scroll ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素 scroll可以监听滚动...

Vuescroll - 一个基于Vue的虚拟滚动条

我发现element-ui触发滚动的时机是在onscroll的时候, 也就是说, 把滚动内容的父元素设置为 overflow:scroll , 然后监听父元素的onScroll事件, 在onScroll事件的callback里面移动滚动内容即可。 经过我的一番改进, 终于能...

vue子组件监听scroll事件

1. 子组件mounted里addEventListener的时候,第三参数要设置为true,因为子组件滚动是捕获事件,父组件滚动是冒泡事件,addEventListener第三参数默认false只监听冒泡事件,所以子组件的捕获事件默认监听不到,改为true才可以.2.这时候...

如何用js监听滚动条滚动事件?

-- vue监听滚动事件 --&gt; var vm = new Vue({ el:'#box', data() { return { scroll: '' } }, methods: { menu() { this.scroll = document.body.scrollTop; console.log(this...

vue列表数据如何滚动刷新十条

当滚动到列表底部时,通过监听滚动事件,可以触发加载更多数据的操作。可以使用Vue插件,如vue-infinite-scroll,来实现无限滚动功能。当滚动到底部时,可以通过异步请求获取新的数据,并将其添加到列表数据中。针对要滚动刷新十...

vue中楼层滚动实现原理解析

点击索引表,实现滚动到相应的模块就非常简单了。根据当前点击索引的索引,找到this.indexTopOffset里面的scrollTop值,然后利用iscroll里面的scrollTo方法滚动就可以了。

vue的滚动条插件vue-scroll

(5)拉取刷新和推动加载 (6)支持分页模式(每次滑动整个页面)(7)支持快照模式(每次滑动滚动一个用户定义的距离)(8)可以检测内容尺寸发生变化 在components中再注册一下 这两种引入方式都可以,引入后用vuescroll包裹需要滚动...

vue 监听某个div垂直滚动条下拉到底部的方法

中滚动条始终定位在底部的方法vue实现动态添加数据滚动条自动滚动到底部的示例代码Vue下滚动到页面底部无限加载数据的示例代码vue监听滚动事件实现滚动监听vue 每次渲染完页面后div的滚动条保持在最底部的方法 ...

JQuery如何实现锚点监听滚动定位?

你发的那个网站用的是 vue.js 中的 vue-router JQuery有个平滑滚动插件 jquery-smooth-scroll 可以实现类似效果。

vue点击锚点事件和监听滚动事件冲突

在 Vue 中,当点击锚点和监听滚动事件之间发生冲突时,可以尝试以下解决方法:1、停止事件冒泡:在点击锚点的事件处理程序中,使用 event.stopPropagation() 方法来停止事件冒泡。这将阻止点击事件进一步传播到监听滚动事件的元素...

Top