Vue頁面中實現(xiàn)平滑滾動功能
這是一個實現(xiàn)平滑滾動的函數(shù)，可以讓頁面在滾動到指定位置時產(chǎn)生緩動效果
該函數(shù)依賴于Math.easeInOutQuad函數(shù)和requestAnimFrame函數(shù)，其中Math.easeInOutQuad函數(shù)用于計算當前滾動位置的值（根據(jù)時間、起始值、變化量和持續(xù)時間），requestAnimFrame函數(shù)用于實現(xiàn)動畫效果。
函數(shù)的參數(shù)包括：
- to: 目標滾動位置；
- duration: 滾動持續(xù)時間，默認為500毫秒；
- callback: 滾動結(jié)束后的回調(diào)函數(shù)。
函數(shù)的實現(xiàn)過程如下：
- 獲取當前滾動位置（start）和需要滾動的距離（change）；
- 設置每次滾動的增量（increment），默認為20；
- 定義動畫開始時間（currentTime），默認為0；
- 根據(jù)Math.easeInOutQuad函數(shù)計算新的滾動位置值，并將其應用于文檔的scrollTop屬性；
- 判斷當前時間是否小于持續(xù)時間，如果是則使用requestAnimFrame函數(shù)繼續(xù)執(zhí)行動畫，否則執(zhí)行回調(diào)函數(shù)。
Math.easeInOutQuad = function(t, b, c, d) {
t /= d / 2
if (t < 1) {
return c / 2 * t * t + b
}
t--
return -c / 2 * (t * (t - 2) - 1) + b
}
var requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
})()
/**
* @param {number} amount
*/
function move(amount) {
document.documentElement.scrollTop = amount
document.body.parentNode.scrollTop = amount
document.body.scrollTop = amount
}
function position() {
return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
}
/**
* @param {number} to
* @param {number} duration
* @param {Function} callback
*/
export function scrollTo(to, duration, callback) {
const start = position()
const change = to - start
const increment = 20
let currentTime = 0
duration = (typeof (duration) === 'undefined') ? 500 : duration
var animateScroll = function() {
// increment the time
currentTime += increment
// find the value with the quadratic in-out easing function
var val = Math.easeInOutQuad(currentTime, start, change, duration)
// move the document.body
move(val)
// do the animation unless its over
if (currentTime < duration) {
requestAnimFrame(animateScroll)
} else {
if (callback && typeof (callback) === 'function') {
// the animation is done so lets callback
callback()
}
}
}
animateScroll()
}要使用這個平滑滾動的功能，你需要按照以下步驟進行操作：
將上述代碼復制到你的項目中的一個文件中（比如
scroll.js），并確保該文件被引入到你的Vue組件中。在你的Vue組件中，可以通過以下方式調(diào)用
scrollTo函數(shù)：
import { scrollTo } from './scroll.js';
export default {
methods: {
smoothScroll() {
scrollTo(0, 1000, () => {
console.log('滾動結(jié)束！');
});
}
},
};在上面的例子中，我們將scrollTo函數(shù)封裝在Vue組件的methods選項中的smoothScroll方法中。當你希望觸發(fā)平滑滾動時，可以在模板或其他方法中調(diào)用這個方法。
在Vue組件的模板中，你可以綁定按鈕的點擊事件來觸發(fā)平滑滾動。例如：
<template>
<div>
<button @click="smoothScroll">平滑滾動到頂部</button>
</div>
</template>在上面的例子中，當按鈕被點擊時，會調(diào)用smoothScroll方法，從而觸發(fā)平滑滾動。
確保根據(jù)你的實際需求修改代碼中的目標滾動位置、持續(xù)時間和回調(diào)函數(shù)等參數(shù)。
以上就是Vue頁面中實現(xiàn)平滑滾動的效果的詳細內(nèi)容，更多關(guān)于Vue頁面平滑滾動的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue如何使用EasyPlayerPro實現(xiàn)播放本地MP4視頻功能,感興趣的小伙伴可以跟隨小編一起學習一下2024-11-11
vue使用exif獲取圖片旋轉(zhuǎn)，壓縮的示例代碼
這篇文章主要介紹了vue使用exif獲取圖片旋轉(zhuǎn)，壓縮的示例代碼，幫助大家更好的利用python處理圖片，感興趣的朋友可以了解下2020-12-12
vant(ZanUi)結(jié)合async-validator實現(xiàn)表單驗證的方法
這篇文章主要介紹了vant(ZanUi)結(jié)合async-validator實現(xiàn)表單驗證的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue之使用JsonView來展示Json樹的實例代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11
本篇文章主要介紹了如何解決vue與傳統(tǒng)jquery插件沖突，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
vue中使用Echarts?map圖實現(xiàn)下鉆至縣級的思路詳解
這篇文章主要介紹了vue中使用Echarts?map圖實現(xiàn)下鉆至縣級,需要注意的是，因為我是直接從?vue-cli2?直接跳到?vue-cli4?，還奇怪怎么讀取不到JSON，查找后才知道?vue-cli3?往后的項目基礎架構(gòu)對比舊版本有些區(qū)別，感興趣的朋友跟隨小編一起看看吧2022-01-01
這篇文章主要介紹了vue中的install方法使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在本篇文章里小編給大家分享的是一篇關(guān)于vue props 單項數(shù)據(jù)流實例分享內(nèi)容，需要的朋友們可以參考下。2020-02-02
今天小編就為大家分享一篇關(guān)于Vue核心概念Action的總結(jié)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了Vue 表情包輸入組件的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01