這篇文章主要介紹了Vue如何實現(xiàn)一個返回頂部backToTop組件，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。
前言
返回頂部這個功能用jq實現(xiàn),好容易實現(xiàn),一個animate配合scrollTo就搞定了
今天我們來試試vue封裝一個原生js實現(xiàn)的返回頂部;
寫起來夠嗆,借助github,看了別人的gist,稍微封裝了下;
當(dāng)然不是用scrollTo直接調(diào)位那種,沒有過渡效果怎么說得過去!!還是搗鼓出來了.
廢話不多說,看效果圖…
效果圖
實現(xiàn)思路
過渡用的是requestAnimationFrame,這貨只支持IE10+,所以必須做兼容
滾動視圖是window.pageYOffset,這貨支持IE9+;
為了讓可控性更強,圖標(biāo)采用iconfont,具體瞅代碼
你能學(xué)到什么?
學(xué)到一些頁面計算相關(guān)的東東
動畫API的一些知識
Vue封裝組件相關(guān)知識和生命周期和事件監(jiān)聽銷毀相關(guān)知識的運用
實現(xiàn)功能
視圖默認(rèn)在350處顯示返回頂部的按鈕和圖標(biāo)
提示文字和顏色,在圖標(biāo)上下左右的自定義,字段都限制了格式和默認(rèn)值
圖標(biāo)顏色和形狀,大小的自定義,字段都限制了格式和默認(rèn)值
過渡動效的自定義,用法:scrollIt(0, 1500, 'easeInOutCubic', callback);
返回到視圖的point,也就是滾動到哪里
過渡時間(ms級別)
一堆過渡效果,字符串格式,其實就是滾動的計算函數(shù)..
當(dāng)然少不了默認(rèn)參數(shù)了,除了callback
兼容性是IE9+,特意開了虛擬機去嘗試
代碼
scrollIt.js –過渡滾動實現(xiàn)
重慶分公司
重慶分公司
export function scrollIt(
destination = 0,
duration = 200,
easing = "linear",
callback
) {
// define timing functions -- 過渡動效
let easings = {
// no easing, no acceleration
linear(t) {
return t;
},
// accelerating from zero velocity
easeInQuad(t) {
return t * t;
},
// decelerating to zero velocity
easeOutQuad(t) {
return t * (2 - t);
},
// acceleration until halfway, then deceleration
easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
},
// accelerating from zero velocity
easeInCubic(t) {
return t * t * t;
},
// decelerating to zero velocity
easeOutCubic(t) {
return --t * t * t + 1;
},
// acceleration until halfway, then deceleration
easeInOutCubic(t) {
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
},
// accelerating from zero velocity
easeInQuart(t) {
return t * t * t * t;
},
// decelerating to zero velocity
easeOutQuart(t) {
return 1 - --t * t * t * t;
},
// acceleration until halfway, then deceleration
easeInOutQuart(t) {
return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
},
// accelerating from zero velocity
easeInQuint(t) {
return t * t * t * t * t;
},
// decelerating to zero velocity
easeOutQuint(t) {
return 1 + --t * t * t * t * t;
},
// acceleration until halfway, then deceleration
easeInOutQuint(t) {
return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
}
};
// requestAnimationFrame()的兼容性封裝：先判斷是否原生支持各種帶前綴的
//不行的話就采用延時的方案
(function() {
var lastTime = 0;
var vendors = ["ms", "moz", "webkit", "o"];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame =
window[vendors[x] + "RequestAnimationFrame"];
window.cancelAnimationFrame =
window[vendors[x] + "CancelAnimationFrame"] ||
window[vendors[x] + "CancelRequestAnimationFrame"];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
})();
function checkElement() {
// chrome,safari及一些瀏覽器對于documentElemnt的計算標(biāo)準(zhǔn)化,reset的作用
document.documentElement.scrollTop += 1;
let elm =
document.documentElement.scrollTop !== 0
? document.documentElement
: document.body;
document.documentElement.scrollTop -= 1;
return elm;
}
let element = checkElement();
let start = element.scrollTop; // 當(dāng)前滾動距離
let startTime = Date.now(); // 當(dāng)前時間
function scroll() { // 滾動的實現(xiàn)
let now = Date.now();
let time = Math.min(1, (now - startTime) / duration);
let timeFunction = easings[easing](time);
element.scrollTop = timeFunction * (destination - start) + start;
if (element.scrollTop === destination) {
callback; // 此次執(zhí)行回調(diào)函數(shù)
return;
}
window.requestAnimationFrame(scroll);
}
scroll();
}backToTop.vue
