基于vue监听滚动事件实现锚点链接平滑滚动的方法
基于vue监听滚动事件,实现锚点链接平滑滚动
近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品)
小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下):
1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动)
2.滚动右边的滚动条,左边对应的显示当前样式
3.若从别的页面点击菜品进来该页面,则该菜品为指定效果
小编也是vue的初学者,在阅读了大量的文章后,其中借鉴//www.jb51.net/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) },
这里写的有点??铝耍?柚?etTimeout延迟是为了能够获取到元素(谁有好办法快推荐给我),为了在滚动中能够对应列表显示锚点当前状态,存了一个数据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。但是一时也没有更好的办法来实现。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Pandas——高效的数据处理Python库
- Oracle中的段(r10笔记第81天)
- 转-- Golang中timer定时器实现原理
- Golang语言 -并行程序
- 深度学习中的优化问题以及常用优化算法
- GoldenGate简单复制环境的搭建(r10笔记第79天)
- 在Golang语言中统计程序执行时间
- 经典面试问题: Top K 之 ---- 海量数据找出现次数最多或,不重复的。
- 每天一个Linux命令(2):cd命令
- Golang语言为类型添加方法
- 浅谈 Glide - BitmapPool 的存储时机 & 解答 ViewTarget 在同一View显示不同的图片时,总用同一个 Bitmap 引用的原因
- 100个Numpy练习【2】
- 浅谈 maxMemory , totalMemory , freeMemory 和 OOM 与 native Heap
- 100个Numpy练习【1】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- IT运维面试问题总结-基础服务、磁盘管理、虚拟平台和系统管理
- IT运维面试问题总结-运维工具、开源应用(Ansible、Ceph、Docker、Apache、Nginx等)
- IT运维面试问题总结-数据库、监控、网络管理(NoSQL、MongoDB、MySQL、Prometheus、Zabbix)
- IT运维面试问题总结-LVS、Keepalived、HAProxy、Kubernetes、OpenShift等
- GitHub 标星 119K+!这些神器仅需一行代码即可下载全网视频!
- React进阶(2)-上手实践Redux-如何获取store的数据
- 关于Python3.9,这张「新特性必知图」就够了
- 3.Docker学习之Dockerfile
- n1.Docker命令参数一览表
- 2.Docker学习之基础使用
- 4-Kubernetes基础实战操作与配置
- n3-Kubernets对象字段描述一览
- n2-kubernetes操作命令详细一览
- 你不知道的this(2)
- import