vue3 返回顶部组件

关注

原创最新推荐文章于 2026-08-19 15:24:21 发布 356 阅读 AI 写同款· GEO 优化 ›

TransUnet官方代码训练自己数据集（彩色RGB3通道图像的分割）官方代码：https://github.com/Beckschen/TransUNet 目的：训练5个类别的汽车部件分割任务（测试在另一篇博客中）实现效果： 1. github下载代码，并解压。项目里的文件可能跟你下载的不一样，不急后面会讲到！ 2. 配置数据集（尽最大努力还原官方数据集的格式）。通常自己手上的数据集分images和labels文件夹，分别存放着原始图像和对应的mask图像，如下图所示; mask图像中的像素有0,1,2,3,4 分别代表背景，车身，轮子，车灯，窗户，一共五个阅读详情

<template>
<div class="body"></div>
  <div v-if="btnShow" style="position: fixed; right: 50px;bottom: 50px; z-index: 2">
    <button class="scaleBig" @click="backTop">1213</button>
  </div>
</template>
<script>
import { onMounted, ref } from "vue";
export default {
  name: "Top",
  setup() {
    const btnShow = ref(false)
    let timer = null; onMounted(() => {
      window.addEventListener('scroll', scrollToTop)
    })
    const backTop=()=> {
      timer = setInterval(function () {
        let backTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        let speedTop = backTop / 5; 
        document.documentElement.scrollTop = backTop - speedTop; if (backTop === 0) {
          clearInterval(timer)
        }
      }, 50);
    } 
    const scrollToTop=()=> {
      let pageLookHeight = document.documentElement.clientHeight || document.body.clientHeight
      let scroll = document.documentElement.scrollTop
      if (scroll >= pageLookHeight) {
        btnShow.value = true
      } else {
        btnShow.value = false
      }
    } 
    return {
      top, btnShow, timer, backTop, scrollToTop
    }
  }
} 
</script>
<style scoped lang="scss">
.body{
  height: 5000px;
  width: 100%;
  background-color: aquamarine;
}
.scaleBig {
  transition: transform 0.5s ease;
}

.scaleBig:hover {
  transform: scale(1.4);
}
</style>

收录于