Vue实现一个返回顶部backToTop组件


Posted in Javascript onJuly 25, 2017

最近在学习VUE。自己就在研究怎么用VUE实现一个组件的封装,今日就算留个笔记

前言

返回顶部这个功能用jq实现,好容易实现,一个animate配合scrollTo就搞定了

今天我们来试试vue封装一个原生js实现的返回顶部;
写起来够呛,借助github,看了别人的gist,稍微封装了下;

当然不是用scrollTo直接调位那种,没有过渡效果怎么说得过去!!还是捣鼓出来了.

废话不多说,看效果图…

效果图

Vue实现一个返回顶部backToTop组件

实现思路

  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 ?过渡滚动实现

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>
 <div 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>
 </div>
</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,也就是十来分钟的事情,

思路会了,实现更多的是写法而已,至于性能优化,可以一边写一边考虑,也可以实现后有空再优化.

希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
微信小程序实现页面左右滑动
Nov 16 Javascript
基于jquery实现多级菜单效果
Jul 25 #jQuery
关于TypeScript中import JSON的正确姿势详解
Jul 25 #Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 #Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 #Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 #Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 #Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 #Javascript
You might like
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
prototype 中文参数乱码解决方案
2009/11/09 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python实现的一个简单LRU cache
2014/09/26 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
Python 实现链表实例代码
2017/04/07 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
详解python中index()、find()方法
2019/08/29 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
财务工作个人总结
2015/02/27 职场文书
《植树问题》教学反思
2016/03/03 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android