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


Posted in Javascript onJanuary 17, 2018

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

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

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

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

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

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

:scrollTop(滚动之根本)

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

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

一、组件html结构:

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

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

注意看注释::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。但是一时也没有更好的办法来实现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
javascript 全等号运算符使用说明
May 31 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 #Javascript
swiper动态改变滑动内容的实现方法
Jan 17 #Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 #Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 #Javascript
angularjs 页面自适应高度的方法
Jan 17 #Javascript
VueJs监听window.resize方法示例
Jan 17 #Javascript
详解AngularJS之$window窗口对象
Jan 17 #Javascript
You might like
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
php之XML转数组函数的详解
2013/06/07 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
详解微信小程序支付流程与梳理
2019/07/16 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
简明 Python 基础学习教程
2007/02/08 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
优秀教师先进事迹
2014/01/22 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL