使用c+v让vue返回顶部组件

这篇文章主要介绍了关于使用c+v让vue返回顶部组件vue.js实现返回顶部，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

<p class="back-to-ceiling" @click="backToTop" v-show="visible" :style="customStyle">

export default {
name: 'BackToTop',
props: {

// 指定达到多少距离显示返回顶部按钮
visibilityHeight: {
  type: Number,
  default: 400
},
// 距离顶部的距离
backPosition: {
  type: Number,
  default: 0
},
customStyle: {
  type: Object,
  default: function() {
    return {
      right: &#39;50px&#39;,
      bottom: &#39;50px&#39;,
      width: &#39;40px&#39;,
      height: &#39;40px&#39;,
      &#39;border-radius&#39;: &#39;4px&#39;,
      &#39;line-height&#39;: &#39;45px&#39;,
      background: &#39;#e7eaf1&#39;
    }
  }
},
// 过渡动画名称
transitionName: {
  type: String,
  default: &#39;fade&#39;
}

},
data() {

return {
  visible: false,
  interval: null
}

},
mounted() {

window.addEventListener(&#39;scroll&#39;, this.handleScroll)

},
beforeDestroy() {

window.removeEventListener(&#39;scroll&#39;, 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

文章由官网发布，如若转载，请注明出处：https://www.veimoz.com/1436

复制登录 vue.js实现返回顶部返回顶部 js 如何使用js实现返回顶部过渡效果顶部组件返回

0 评论

411