前端 滚动到目标元素位置 VUE 版本

请叫我海龟先生 等级 801 0 0
标签: vueJavascript

1、前言

想起之前一次在写一个小程序商城时候,详情页的类似锚点的跳转花了我不少时间,因为刚写,对小程序滚动,滚动距离那套不熟悉加之本身对什么滚动高度元素距离顶部距离不是很了解,花了挺长时间的,这几天有空,就研究了下。

2、先看效果

前端 滚动到目标元素位置  VUE 版本 额,tab点击没有加效果,看着不明显,你懂我的意思就行 哈哈,电商里面最常见了

3、页面搭建

先搞一个 tab,然后下面就是 几个对应的div盒子

// 标题
 <div class="tab" >
      <span v-for="item in 4" 
              :key="item" @click="toView(item)" >
          {{`滚到${item}去`}}
      </span>
</div>
//内容
// 这是采用动态绑定ref 方便获取对应 dom 距离顶部的距离
// 同时也动态绑定元素的背景色和高度,便于区分
<div v-for="item in 4" :key="item" 
        :ref="'scrollView'+item" :id="'tab'+item" 
        class="item_box" :style="getStyle(item)" >
            {{item}}
</div>

4、动态绑定如下:

// getRandomArbitrary 用于生产指定区间的随机数
 computed:{
   getStyle(){
        return function (index){
            // 高度我就 *对应的 index来递增了
            let height = this.getRandomArbitrary(110,300)*index
            return {
                'background':
                   `linear-gradient(rgb(240,255,240),rgb(${this.getRandomArbitrary(230,255)}, ${this.getRandomArbitrary(230,240)}, ${this.getRandomArbitrary(240,255)}))`,
               height:`${height}px`
           }
        }
    }
},

5、开始实现:

目前用了三种方式:

  1. 锚点跳转
  2. ele.scrollIntoView() api跳转
  3. 老老实实用 window.scrollTo

5、1 锚点

//  锚点简单,搞个a标签,href指向对应盒子的 id就可以了,但是有个毛病
//:8080/anchor#tab1,路由也变成了这样,而且还添加到了页面历史记录中了
anchorWay(){
      let link = document.createElement("a")
       link.href = '#'+'tab'+index
       link.click()
       link.removeChild()
},

5.2、scrollIntoView

//这个也简单,想要跳转到哪个元素,就在这个元素上调用此api就行了
//还支持动画,不过ios不支持
// 这个有个弊端就是,他只能让元素滚动到页面顶部,或者元素底部在页面底部
// 一般我们上面还有个导航的 所以跳转后还需要动态去改变下距离顶部距离
scrIntoView(ele){
  // ele.scrollIntoView({behavior: "smooth", block: "start"})
    ele.scrollIntoView(true)
},

5.3、window.scrollTo

这个最方便了,直接找好需要滚动的位置,传入即可window.scrollTo(x,y)
我想来个动画呢
window.requestAnimationFrame

这个api之前有写过,有兴趣可看看之前写的,简单说下,这个api是请求开启一个动画,接收一个函数,会自动以 浏览器刷新的频率去执行,也就是说 如果我们,不断的改变 传入 window.scrollTo(x,y)中的 y值,这样就可以呈现动画的效果了。 好比 1+10+9+8+7+....+0.1 总有一天会加到100

分成几个小步骤

5.3.1、点击tab时

主要目的,获取需要的目标盒子距离顶部的距离(对应元素距离屏幕顶部),同时,当该元素距离顶部的距离 == 顶部导航高度(一般可以已知)时,不进行滚动

// 点击 tab
toView(index){
     let refV = `scrollView${index}`
     let scrView = this.$refs[refV][0]
     // 目标盒子 距离顶部距离
     let viewTop = parseInt( scrView.getBoundingClientRect().top )
     // 31 为顶部导航高度,可灵活变更 已在导航下方 return
     if( Math.abs(viewTop) < 32 ) return
     this.winScrllToView(viewTop - 31)
 },

5.3.2、获取当前window已滚动距离和需要滚动的目标位置

// y 目标元素距离顶部的距离(已减去导航高度)
 winScrllToView(y){
      // 页面当前滚动距离
      let sTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 页面滚动目标位置
      this.sTarget = parseInt (sTop + y)
      // 页面滚动当前位置
      this.nowLocation = parseInt(sTop)

      this.animaScrll()
  },

5.3.3、动画函数

已经知道了滚动的目标位置,和当前滚动位置,接下来就是实现滚动距离的累加(累减,上滚动时)

  // 动画函数
  animaScrll(){
  // 累加值 为 目标位置 - 已经滚动距离 / 8 呈现累加值递减
   let addDis =  (this.sTarget - this.nowLocation) / 8 

   this.nowLocation += addDis 
   window.scrollTo(0,this.nowLocation)
    // 类似定时器 会返回一个id 用来清除
   this.aniTimer = window.requestAnimationFrame(this.animaScrll)
    // 理想状态是  目标值  == 累加滚动的值 实际上不肯的,边界值可以自行判断
   if( Math.abs(this.sTarget  - this.nowLocation) <= 2 ) {
       window.cancelAnimationFrame(this.aniTimer)
       this.nowLocation = 0
       this.aniTimer = null
   }
}

好了,整个过程就完了,总的来说还是 window.scrollTo 来的直接暴力。requestAnimationFrame也存在部分兼容问题

收藏
评论区

相关推荐

Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
了解Vuex状态管理模式
1 Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢? vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
前端 滚动到目标元素位置 VUE 版本
1、前言 想起之前一次在写一个小程序商城时候,详情页的类似锚点的跳转花了我不少时间,因为刚写,对小程序滚动,滚动距离那套不熟悉加之本身对什么滚动高度,元素距离顶部距离不是很了解,花了挺长时间的,这几天有空,就研究了下。 2、先看效果 在这里插入图片描述(https://imghelloworld.osscnbeijing.aliyuncs.c
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始
前端技术栈:5分钟入门VUE+Element UI
目录前端技术栈:5分钟入门VUEElement UI前言2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进VUE是啥?简单来说就是
vue-生命周期
vue生命周期 即为一个组件从出生到死亡的一个完整周期,主要包括以下4个阶段:创建,挂载,更新,销毁 创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂载后:mounted 更新前:beforeUpdate, 更新后:updated 销毁前:beforeDestroy, 销毁后:destroye
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
前言在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。第一步,安装webpack简易框架vue init webpacksimple marquee 这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cliinit npm install g @vue
前端培训-Vue专题之Vue基础
简介特点:MVVM框架,双向绑定,数据驱动,单页面,组件化。 区别Vue 和 jQuery 的区别:不直接操作DOM,而是操作数据。案例:Hello World 你好,世界HTML代码:xml<h1msg</h1jQuery实现javascript$("h1").text("你好,世界");Vue 实现javascriptthis.msg '你好,世界'
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。 language JavaScript "name": "vuecliversion2", "version": "1.0.0", "desc
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d