vue3 实现简易滚动效果vue 是实现简易滚动效果

96 阅读 0 评论 64 点赞

我是靠谱客的博主负责柚子，这篇文章主要介绍vue3 实现简易滚动效果vue 是实现简易滚动效果，现在分享给大家，希望可以做个参考。

vue 是实现简易滚动效果

前言

在做h5页面时需要实现索引栏一样的效果，但直接引用组件会影响之前的整体布局。思考之后决定使用
vant-ui Tab滚动效果来实现，经过简化vant源码分享给大家。

动画效果的实现主要通过 raf 中的requestAnimationFrame

requestAnimationFrame

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧>对网页进行重绘。

设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）>能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。代码中使用这个>API，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。

requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定>的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次，requestAnimationFrame的>基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦>页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。

不过有一点需要注意，requestAnimationFrame是在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame的动画效果会大打折扣。
requestAnimationFrame使用一个回调函数作为参数。这个回调函数会在浏览器重绘之前调用。

html

复制代码

1
2
 <button @click="scrollTopTo(1000)">点击</button>

js

复制代码

let inBrowser = typeof window !== 'undefined'
function raf(fn) {
    return inBrowser ? requestAnimationFrame(fn) : -1
}

const scrollTopTo = (
    to, //需要滚动到的位置
    scroller = window,//需要滚动的窗口 默认是window窗口 
    duration = .3,  //默认延迟时间0.3s
    callback = () => {} //回调函数 可以通过回调函数阻止滚动进行时其他事件触发
) => {
    let current = getScrollTop(scroller) //获取当前窗口位置
    const isDown = current < to
    const frames = duration === 0 ? 1 : Math.round((duration * 1000) / 16)
    const step = (to - current) / frames
   
    function animate() {
    	//使用递归 + 或 -
        current += step 
        if ((isDown && current > to) || (!isDown && current < to)) {
            current = to
        }
        setScrollTop(scroller, current)  // 改变窗口位置
        if ((isDown && current < to) || (!isDown && current > to)) {
            raf(animate)
        } else if (callback) {
            raf(callback)
        }
    }
    animate()
}

const getScrollTop = (el) => {
    const top = 'scrollTop' in el ? el.scrollTop : el.pageYOffset
    return Math.max(top, 0)
}

const setScrollTop = (el, value) => {
    if ('scrollTop' in el) {
        el.scrollTop = value
    } else {
        el.scrollTo(el.scrollX, value)
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
let inBrowser = typeof window !== 'undefined'
function raf(fn) {
    return inBrowser ? requestAnimationFrame(fn) : -1
}

const scrollTopTo = (
    to, //需要滚动到的位置
    scroller = window,//需要滚动的窗口 默认是window窗口 
    duration = .3,  //默认延迟时间0.3s
    callback = () => {} //回调函数 可以通过回调函数阻止滚动进行时其他事件触发
) => {
    let current = getScrollTop(scroller) //获取当前窗口位置
    const isDown = current < to
    const frames = duration === 0 ? 1 : Math.round((duration * 1000) / 16)
    const step = (to - current) / frames
   
    function animate() {
    	//使用递归 + 或 -
        current += step 
        if ((isDown && current > to) || (!isDown && current < to)) {
            current = to
        }
        setScrollTop(scroller, current)  // 改变窗口位置
        if ((isDown && current < to) || (!isDown && current > to)) {
            raf(animate)
        } else if (callback) {
            raf(callback)
        }
    }
    animate()
}

const getScrollTop = (el) => {
    const top = 'scrollTop' in el ? el.scrollTop : el.pageYOffset
    return Math.max(top, 0)
}

const setScrollTop = (el, value) => {
    if ('scrollTop' in el) {
        el.scrollTop = value
    } else {
        el.scrollTo(el.scrollX, value)
    }
}