本篇文章主要介紹了Vue實作一個返回頂部backToTop元件,可以實現回到頂部效果,具有一定的參考價值,有興趣的可以了解一下
最近在學習VUE。自己就在研究怎麼用VUE實作一個元件的封裝,今日就算留個筆記
#前言
回到頂部這個功能用jq實作,好容易實作,一個animate配合scrollTo就搞定了
今天我們來試試vue封裝一個原生js實現的返回頂部;
寫起來夠嗆,借助github,看了別人的gist,稍微封裝了下;
當然不是用scrollTo直接調位那種,沒有過渡效果怎麼說得過去!!還是搗鼓出來了.
廢話不多說,看效果圖…
效果圖
實作想法
#轉換用的是requestAnimationFrame,這貨只支援IE10 ,所以必須做相容
捲動檢視是window.pageYOffset,這貨支援IE9 ;
為了讓可控性更強,圖示採用iconfont,具體瞅代碼
你能學到什麼?
學到一些頁面計算相關的東東
動畫API的一些知識
#Vue封裝元件相關知識和生命週期和事件監聽銷毀相關知識的運用
實作功能
#檢視預設在350處顯示回傳頂部的按鈕和圖示
提示文字和顏色,在圖示上下左右的自訂,欄位都限制了格式和預設值
圖示顏色和形狀,大小的自定義,欄位都限制了格式和預設值
過渡動效的自訂,用法:scrollIt(0, 1500, 'easeInOutCubic', callback);
回到視圖的point,也就是捲動到哪裡
#過渡時間(ms級別)
一堆過渡效果,字串格式,其實就是滾動的計算函數..
當然少不了預設參數了,除了callback
相容性是IE9 ,特意開了虛擬機器去嘗試
代碼
scrollIt.js –過渡滾動實作
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的计算标准化,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; // 当前滚动距离 let startTime = Date.now(); // 当前时间 function scroll() { // 滚动的实现 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; // 此次执行回调函数 return; } window.requestAnimationFrame(scroll); } scroll(); }
backToTop.vue
<template> <p class="back-to-top" @click="backToTop" v-show="showReturnToTop" @mouseenter="show" @mouseleave="hide"> <i :class="[bttOption.iClass]" :style="{color:bttOption.iColor,'font-size':bttOption.iFontsize}"></i> <span class="tips" :class="[bttOption.iPos]" :style="{color:bttOption.textColor}" v-show="showTooltips">{{bttOption.text}}</span> </p> </template> <script> import { scrollIt } from './scrollIt'; // 引入动画过渡的实现 export default { name: 'back-to-top', props: { text: { // 文本提示 type: String, default: '返回顶部' }, textColor: { // 文本颜色 type: String, default: '#f00' }, iPos: { // 文本位置 type: String, default: 'right' }, iClass: { // 图标形状 type: String, default: 'fzicon fz-ad-fanhuidingbu1' }, iColor: { // 图标颜色 type: String, default: '#f00' }, iFontsize: { // 图标大小 type: String, default: '32px' }, pageY: { // 默认在哪个视图显示返回按钮 type: Number, default: 400 }, transitionName: { // 过渡动画名称 type: String, default: 'linear' } }, data: function () { return { showTooltips: false, showReturnToTop: false } }, computed: { bttOption () { return { text: this.text, textColor: this.textColor, iPos: this.iPos, iClass: this.iClass, iColor: this.iColor, iFontsize: this.iFontsize } } }, methods: { show () { // 显示隐藏提示文字 return this.showTooltips = true; }, hide () { return this.showTooltips = false; }, currentPageYOffset () { // 判断滚动区域大于多少的时候显示返回顶部的按钮 window.pageYOffset > this.pageY ? this.showReturnToTop = true : this.showReturnToTop = false; }, backToTop () { scrollIt(0, 1500, this.transitionName, this.currentPageYOffset); } }, created () { window.addEventListener('scroll', this.currentPageYOffset); }, beforeDestroy () { window.removeEventListener('scroll', this.currentPageYOffset) } } </script> <style scoped lang="scss"> .back-to-top { position: fixed; bottom: 5%; right: 100px; z-index: 9999; cursor: pointer; width: auto; i { font-size: 32px; display: inline-block; position: relative; text-align: center; padding: 5px; background-color: rgba(234, 231, 231, 0.52); border-radius: 5px; transition: all 0.3s linear; &:hover { border-radius: 50%; background: #222; color: #fff !important; } } .tips { display: inline-block; position: absolute; word-break: normal; white-space: nowrap; width: auto; font-size: 12px; color: #fff; z-index: -1; } .left { right: 0; top: 50%; margin-right: 50px; transform: translateY(-50%); } .right { left: 0; top: 50%; margin-left: 50px; transform: translateY(-50%); } .bottom { bottom: 0; margin-top: 50px; } .top { top: 0; margin-bottom: 50px; } } </style>
#總結
從心血來潮到折騰出來,為了兼顧兼容性和拓展性,好像幾個小時了.
不過實現了.你再搬到其他語言,類似ng4,也就是十來分鐘的事情,
關於VUE-地區選擇器(V-Distpicker)元件的使用介紹
以上是Vue實作傳回頂部backToTop的元件的詳細內容。更多資訊請關注PHP中文網其他相關文章!