この記事では、トップに戻る効果を実現でき、一定の参考価値のある backToTop コンポーネントの実装を主に紹介します。興味のある方は詳細をご覧ください
最近 VUE を勉強しています。 VUEを使ってコンポーネントのカプセル化を実装する方法を勉強中です
はじめに
この機能はjqで実装することができます。 animateとscrollToで完了しました
今日はここにいますvueでネイティブjs実装をカプセル化してトップに戻ります
書くのが難しいので、githubを使用して他の人の要点を見て少しカプセル化しました
;もちろん、これは、scrollTo による直接調整のようなものではありません。トランジション エフェクトなしで、どうやって調整することができますか? 早速、レンダリングを見てみましょう。
実装アイデア
トランジションはIE10+のみをサポートするrequestAnimationFrameを使用しているため、互換性を持たせる必要があります
スクロールビューはIE9+をサポートするwindow.pageYOffsetです;
ページ計算に関連したことをいくつか学びましょう
アニメーション API についての知識
実装機能
ビューには、デフォルトで350に「トップに戻る」ボタンとアイコンが表示されます
プロンプトテキストと色、アイコンの上下左右のカスタマイズ、フィールドの形式とデフォルト値には制限があります
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(); }
<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 などの他の言語に移行する場合は、わずか 10 分しかかかりませんアイデアは理解されました。パフォーマンスの最適化については、書きながら考えることもできますし、実装後に時間があるときに最適化することもできます
以上が、皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトを参照してください。
関連する推奨事項:
VUE 領域セレクター (V-Distpicker) コンポーネントの使用の概要
vue プロジェクトの構築、パッケージ化、公開プロセスの概要
以上がVue はトップ backToTop を返すコンポーネントを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。