全国咨询热线:18720358503

图书店微信小程序_Vue完成一个返回顶部backToTop组

类别:行业新闻 发布时间:2021-01-11 浏览人次:

Vue实现一个返回顶部backToTop组件       本篇文章主要介绍了Vue实现一个返回顶部backToTop组件,可以实现回到顶部效果,具有一定的参考价值,有兴趣的可以了解一下

返回顶部这个功能用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
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 @click="backToTop" v-show="showReturnToTop" @mouseenter="show" @mouseleave="hide" 
 i : :style="{color:bttOption.iColor,'font-size':bttOption.iFontsize}" /i 
 span : : v-show="showToolti凡科抠图" {{bttOption.text}} /span 
 /div 
 /template 
 script 
 import { scrollIt } from './scrollIt'; // 引入动画过渡的实现
 export default {
 name: 'back-to-top',
 pro凡科抠图: {
 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 {
 showToolti凡科抠图: 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.showToolti凡科抠图 = true;
 hide () {
 return this.showToolti凡科抠图 = 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;
 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;
 .ti凡科抠图 {
 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完成一个返回顶部backToTop组

Vue完成一个回到顶端backToTop部件 回到顶端这一作用用jq完成,好非常容易完成,一个animate相互配合scrollTo就拿下了今日大家来试一下vue封裝一个原生态js完成的回到顶端; 写起來够戗...

2021-01-11
探索当前医疗网站应如何进行seo优化

近期,我接到了一份诊疗服务平台明细。该企业已经做整容手术治疗。历经剖析,发了现网站内90%的重要词排行1-5是百度搜索自身的商品,6-10个是加权67八个网站。而且有三个网站与百...

2021-01-11
微信小程序收费吗_get post jsonp三种数据交互形式

get post jsonp三种数据信息互动方式案例详细说明 文中根据案例给大伙儿详尽详细介绍了get post jsonp三种数据信息互动方式,十分非常好,具备参照效仿使用价值,必须的的朋友参照...

2021-01-11
如何降低网站的跳出率

怎样减少网站的跳出来率:针对跳出来率这一难题,我觉得许多提升工作人员都很清晰,一个站点的跳出来率高矮体现着这一站点是不是获得浏览量的喜爱,而跳出来率针对大家的站点...

2021-01-11
秦皇岛小程序制作_JS动态修正网页body的布景色实

JS动态性改动网页页面body的情况色案例编码 本文关键详细介绍了JS动态性改动网页页面body的情况色案例编码 ,必须的朋友能够参照下大部分分网页页面默认设置的情况色为乳白色,...

2021-01-11
自助建网站的特性-如何选择一家靠谱的商城开发

如今做微信小程序商城系统的企业许多,那如何挑选一家合适自身的企业太重要,今日呐,青岛市微信小程序制作网编在这里里为大伙儿开展解读,以助于大伙儿在挑选的情况下可...

2021-01-11
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信