vue3 页面滚动到指定位置时开始数字滚动效果

青云HOMIE

于 2024-05-31 11:22:18 发布

阅读量337

点赞数 5

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/q394610321/article/details/139347889

版权

使用到的组件是饿了么的<el-statistic />统计组件

<template>
 ... 省略

 <el-statistic :value="companyBuildValue" />

 ... 省略
</template>

<script setup>
const companyBuild = ref(0)
const companyBuildValue = useTransition(companyBuild, { duration: 1500 })

const handleScroll = (e) => {
  const scrollTop = e.target.scrollTop
//   console.log(`当前滚动像素:${ scrollTop }`)
// 当滚动长度达到1100像素时赋值,页面数字效果开始滚动
  if (scrollTop > 1100) {
    companyBuild.value = 1995
  }
}
window.addEventListener('scroll', handleScroll, true)
</script>