封装返回顶部组件 vant-ui

最新推荐文章于 2024-01-08 23:45:00 发布

别亦难�

最新推荐文章于 2024-01-08 23:45:00 发布

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： ui javascript css3

本文链接：https://blog.csdn.net/qq_43806488/article/details/121996177

vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个自定义的返回顶部组件实现方案，适用于Vue项目。该组件能够根据页面滚动距离自动显示或隐藏，并平滑地将页面滚动回顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vant居然没有返回顶部组件没办法自己封装一个

<template>
  <div>
    <van-button
      color="rgba(0,0,0,.3)"
      round
      class="backTop"
      size="mini"
      @click="backTop"
      v-show="scrollType"
    >
      <van-icon class="icon-backTop" name="arrow-up" size="15" />
    </van-button>
  </div>
</template>

<script>
export default {
  name: 'backTop',
  data () {
    return {
      scrollType: false, // 控制按钮显示和隐藏
      timerId: null,
      scrollTop: 0
    }
  },
  // 组件创建监听scroll此方法
  mounted () {
    window.addEventListener('scroll', this.handleScoll, true)
  },
  // 组件销毁移除监听
  destroyed () {
    window.removeEventListener('scroll', this.handleScoll)
    window.clearInterval(this.timerId)
  },
  methods: {
    backTop () {
      this.timerId = setInterval(() => {
        // 给返回增加动画效果
        const upSpeed = Math.floor(-this.scrollTop / 5)
        document.documentElement.scrollTop = this.scrollTop + upSpeed
        if (this.scrollTop === 0) {
          clearInterval(this.timerId)
        }
      }, 30)
    },
    handleScoll (ev) {
      // 当滚动的距离大于700 时出现该按钮
      this.scrollTop = window.pageYOffset
      if (window.pageYOffset / 100 > 7) {
        this.scrollType = true
      } else {
        this.scrollType = false
      }
    }
  }
}
</script>

<style scoped lang='less'>
.backTop {
  position: fixed;
  bottom: 0.4rem;
  right: 0.2rem;
  z-index: 999;
  border: none;
}
</style>

3.0版本

<template>
  <div class="backTop"  v-show="scrollType" @click.stop="backTop">
    <van-icon name="arrow-up" color="#fff" />
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { onBeforeUnmount, onMounted } from 'vue-demi'
export default {
  name: 'backTop',
  setup () {
    const state = reactive({
      scrollType: false, // 控制按钮显示和隐藏
      timerId: null,
      scrollTop: 0
    })
    function backTop () {
      state.timerId = setInterval(() => {
        // 给返回增加动画效果
        const upSpeed = Math.floor(-state.scrollTop / 5)
        document.documentElement.scrollTop = state.scrollTop + upSpeed
        if (state.scrollTop === 0) {
          clearInterval(state.timerId)
        }
      }, 30)
    }
    function handleScoll (ev) {
      // 当滚动的距离大于700 时出现该按钮
      state.scrollTop = window.pageYOffset
      if (window.pageYOffset / 100 > 7) {
        state.scrollType = true
      } else {
        state.scrollType = false
      }
    }
    onBeforeUnmount(() => {
      window.removeEventListener('scroll', handleScoll)
      clearInterval(state.timerId)
    })
    onMounted(() => {
      window.addEventListener('scroll', handleScoll)
    })
    return {
      ...toRefs(state),
      backTop
    }
  }
}
</script>

<style lang='less'>
.backTop {
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  position: fixed;
  bottom: 60px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  z-index: 999;
}
</style>