<template> <transition :name="transitionName"> <p class="back-to-ceiling" @click="backToTop" v-show="visible" :style="customStyle"> <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;"> <title>回到顶部</title> <g> <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"></path> </g> </svg> </p> </transition> </template> <script> export default { name: 'BackToTop', props: { // 指定达到多少距离显示返回顶部按钮 visibilityHeight: { type: Number, default: 400 }, // 距离顶部的距离 backPosition: { type: Number, default: 0 }, customStyle: { type: Object, default: function() { return { right: '50px', bottom: '50px', width: '40px', height: '40px', 'border-radius': '4px', 'line-height': '45px', background: '#e7eaf1' } } }, // 过渡动画名称 transitionName: { type: String, default: 'fade' } }, data() { return { visible: false, interval: null } }, mounted() { window.addEventListener('scroll', this.handleScroll) }, beforeDestroy() { window.removeEventListener('scroll', this.handleScroll) if (this.interval) { clearInterval(this.interval) } }, methods: { handleScroll() { this.visible = window.pageYOffset > this.visibilityHeight }, backToTop() { const start = window.pageYOffset let i = 0 this.interval = setInterval(() => { const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500)) if (next <= this.backPosition) { window.scrollTo(0, this.backPosition) clearInterval(this.interval) } else { window.scrollTo(0, next) } i++ }, 16.7) }, easeInOutQuad(t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t + b return -c / 2 * (--t * (t - 2) - 1) + b } } } </script> <style scoped> .back-to-ceiling { position: fixed; display: inline-block; text-align: center; cursor: pointer; } .back-to-ceiling:hover { background: #d5dbe7; } .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0 } .back-to-ceiling .Icon { fill: #9aaabf; background: none; } </style>
外部调用:
<back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
愿你成为终身学习者
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
关于vue中extend,mixins,extends,components,install的操作
以上就是使用c+v让vue返回顶部组件的详细内容,更多请关注php中文网其它相关文章!