最近在學習VUE。自己就在研究怎么用VUE實現一個組件的封裝，今日就算留個筆記

前言

返回頂部這個功能用jq實現,好容易實現,一個animate配合scrollTo就搞定了

今天我們來試試vue封裝一個原生js實現的返回頂部;
寫起來夠嗆,借助github,看了別人的gist,稍微封裝了下;

當然不是用scrollTo直接調位那種,沒有過渡效果怎么說得過去!!還是搗鼓出來了.

廢話不多說,看效果圖…

效果圖

實現思路

1. 過渡用的是requestAnimationFrame,這貨只支持IE10+,所以必須做兼容
2. 滾動視圖是window.pageYOffset,這貨支持IE9+;
3. 為了讓可控性更強,圖標采用iconfont,具體瞅代碼

你能學到什么?

1. 學到一些頁面計算相關的東東
2. 動畫API的一些知識
3. Vue封裝組件相關知識和生命周期和事件監聽銷毀相關知識的運用
   

實現功能

1. 視圖默認在350處顯示返回頂部的按鈕和圖標
2. 提示文字和顏色,在圖標上下左右的自定義,字段都限制了格式和默認值
3. 圖標顏色和形狀,大小的自定義,字段都限制了格式和默認值
4. 過渡動效的自定義,用法:scrollIt(0, 1500, 'easeInOutCubic', callback);
   1. 返回到視圖的point,也就是滾動到哪里
   2. 過渡時間(ms級別)
   3. 一堆過渡效果,字符串格式,其實就是滾動的計算函數..
   4. 當然少不了默認參數了,除了callback
5. 兼容性是IE9+,特意開了虛擬機去嘗試

代碼

scrollIt.js