vue2.0模拟锚点实现定位平滑滚动

vue2.0模拟锚点实现定位平滑滚动

  效果为点击哪一个标题,平滑滚动到具体的详情。

  如果是传统项目,这个效果就非常简单。但是放到 Vue 中,就有两大难题:

  1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动?

  2. 如何监听页面滚动事件?

  进行多次尝试之后,终于解决了这些问题

  期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted

  首先导航处

<h3 class="current"><a href="javascript:;" class="button" @click="jump(0)">产品详情</a></h3>
                    <h3><a href="javascript:;" class="button" @click="jump(1)">预定须知</a></h3>
                    <h3><a href="javascript:;" class="button" @click="jump(2)">费用明细</a></h3>
                    <h3><a href="javascript:;" class="button" @click="jump(3)">温馨提示</a></h3>

  添加一个 jump 方法

jump (index) {
    let jump = document.querySelectorAll(‘.d_jump‘)
// 获取需要滚动的距离
    let total = jump[index].offsetTop
    // Chrome
    document.body.scrollTop = total
    // Firefox
document.documentElement.scrollTop = total
// Safari
window.pageYOffset = total
},

通过 offsetTop 获取对象到窗体顶部的距离,然后赋值给 scrollTop,就能实现锚点的功能

需要注意的是,各浏览器下获取 scrollTop 有所差异

Chrome: document.body.scrollTop

Firefox: document.documentElement.scrollTop

二、平滑滚动

将总距离分成很多小段,然后每隔一段时间跳一段

只要每段的时间足够短,频次足够多,在视觉上就是正常的平滑滚动了

实际情况下,得考虑向上滚动和向下滚动两种情况,完整的代码为:

        /**
            * 锚点连接平滑滚动
            **/
            jump(index){
                // 用 class="instance_title" 添加锚点
                let jump = document.querySelectorAll(‘.instance_title‘);
                let total = jump[index].offsetTop;
                let distance = document.documentElement.scrollTop || document.body.scrollTop;
                // 平滑滚动,时长500ms,每10ms一跳,共50跳
                let step = total / 50;
                if (total > distance) {
                    smoothDown();
                } else {
                    let newTotal = distance - total;
                    step = newTotal / 50;
                    smoothUp();
                }
                function smoothDown () {
                    if (distance < total) {
                        distance += step;
                     document.body.scrollTop = distance;
                        document.documentElement.scrollTop = distance;
                        setTimeout(smoothDown, 10);
                    } else {
                        document.body.scrollTop = total;
                        document.documentElement.scrollTop = total;
                    }
                }
                function smoothUp () {
                    if (distance > total) {
                        distance -= step;
                    document.body.scrollTop = distance;
                        document.documentElement.scrollTop = distance;
                        setTimeout(smoothUp, 10);
                    } else {
                        document.body.scrollTop = total;
                        document.documentElement.scrollTop = total;
                    }
                }
            },

三、修改锚点状态

在上面展示的效果中,当页面滚动的时候,锚点的激活状态会有相应的改变

其实这个效果并不难,只需要监听页面滚动事件,然后根据滚动条的距离修改锚点状态就可以了

但是在 Vue 中,应该在什么地方监听滚动事件呢?

mounted: function () {
    this.$nextTick(function () {
      window.addEventListener(‘scroll‘, this.onScroll)
    })
  },
  methods: {
    onScroll () {
      let scrolled = document.documentElement.scrollTop || document.body.scrollTop
    // 586、1063分别为第二个和第三个锚点对应的距离
      if (scrolled >= 1063) {
        this.steps.active = 2
      } else if (scrolled < 1063 && scrolled >= 586) {
        this.steps.active = 1
      } else {
        this.steps.active = 0
      }
    }
  }

上面的代码中,我先写了一个修改锚点状态的方法 onScroll,然后在 mounted 中监听 scroll 事件,并执行 onScroll 方法

mounted 是 Vue 生命周期中的一个状态,在这个状态下,$el (vue 实例的根元素)已经创建完毕,但还没有加载数据

从结果上看,也可以在 created 状态下监听 scroll 事件

原文地址:https://www.cnblogs.com/haonanZhang/p/9517636.html

时间: 2024-10-10 06:28:29

vue2.0模拟锚点实现定位平滑滚动的相关文章

使用vue2.0 vue-router vuex 模拟ios7操作

其实你也可以,甚至做得更好... 首先看一下效果:用vue2.0实现SPA:模拟ios7操作 与 通讯录实现 github地址是:https://github.com/QRL909109/ios7 如果您觉得可以,麻烦给一个star,支持我一下. 之前接触过Angular1.0,React,都只是学点入门,但对于Vue却觉得很容易上手,不止入门简单,插件也是很丰富的,脚手架也是便利的很... 项目分析: 1.首屏滑动解锁,并能移动小圆点 2.主屏幕  长按图标抖动,删除图标,点击小圆点的主屏幕

vue2.0 transition

vue2.0 transition -- demo实践填坑 前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果的时候,虽然比1.0版本强大很多,但是实践过程中还是踩了一些不应该踩但是还是踩了的坑.虽然官网文档已经很详细地介绍了各种应用场景,但是这里还是通过几个小demo案例来感受下vue2.0 transition 带来的便利吧! 实践 这里将通过

URL锚点HTML定位技术机制

一.锚点是什么 锚点就等同于火影中的“飞雷神之术”,我们先看百科中锚点的解释: 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部.然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置.创建到命名锚记的链接的过程分为两步.首先,创建命名锚记,然后创建到该命名锚记的链接. 再看看“飞雷神之术”的解释: 日本动漫<火影忍者>中时空术的一种,S级.利用标记完成空间穿梭. 都是做标记,然后快速定位.说不定AB(岸本齐史)也是个网页制作爱好者哦! 其实,关于锚点,我

模拟锚点

当用a锚点时,安卓出现物理返回键无效.处理方法: <!DOCTYPE html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <meta content="no-cache,must-revalidate" http-equiv="Cache-Control&quo

vue2.0+element-ui(01简单点的单页面)

前言: 在<Vue.js权威指南>刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句"出来混,总是要还的!"这句话了,那时候信心满满的买来书想要认真研究的时候,却还是把它搁浅了.直到最近工作上要使用它来做一个后台管理系统,才不得不逼迫自己再次重新拿起书,看起文档,努力研究这个异常流行的Vue.js. 过程: 简单页面呈现如下   (图片貌似有点模糊,基本实现就是简单的增删改查): 1.使用到的技术: vue2.0:https://cn.vuejs.org/v2/

jquery模拟字母顺序排序定位城市列表方法(bug改进)

jquery模拟字母顺序排序定位城市列表方法 下载地址http://www.lanrenzhijia.com/jquery/3155.html bug 重庆--长沙不能正常排序. 原因是derail有可能会放回两个字符的数组.需要做判断 改进 //改动 特殊字符-->可能还有问题--返回的是数组有两个字符 var   derail =makePy(SortList.eq(i).find('.num_name').text().charAt(0)) if(derail.length==2&&a

vue2.0实践 —— Node + vue 实现移动官网

简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vue-awesome-swiper 插件) 新闻列表 新闻详情 职位列表 联系我们页面(使用百度地图api) 技术 Express.Vue.Vue-Router.Vue-Resource.Webpack Vue vue 的组件化思想和 React 很像,一个 vue 组件将 html.css 和 js

vue2.0 + element ui 后台管理系统

vue2.0 和 elementui  搭建的一个后台管理系统 概述: 这是一个用vuejs2.0和element搭建的后台管理界面. 技术栈: vue2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element ui:基于vue2.0的ui组件库. vue-router:一般单页面应用spa都要用到的前端路由. vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. webpack + es6/7 + less mock.js : 相

html利用锚点实现定位代码实例

html利用锚点实现定位代码实例: 本章节介绍介绍一下如何利用锚点实现定位,使用锚点实现定位是html固有的功能,当然比较简单,也实现了基本的功能,但是功能相对简单一些,如果想要实现平滑的定位可以参阅jquery实现的点击页面动画方式平滑定位到某元素代码一章节. 下面通过代码实例介绍一下html是如何实现锚点定位的. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l