vue-count-to (数字滚动组件)

 

参考地址:https://www.cnblogs.com/mahmud/p/17784975.html

 

复制代码
<div ref="statsSection" class="stats-section">
           <div class="numdiv">
              <div class="numdivc xq-flex-cbetween">
                  <div class="xq-center">
                      <div class="xq-bold xq-white numtel">4大板块</div>
                      <div class="xq-bold xq-white numstel">应用场景</div>
                  </div>
                  <div class="xq-center" v-if="showCount">
                      <div class="xq-bold xq-white numtel"><count-to :startVal="0" :endVal="5000" :duration="2500" />+</div>
                      <div class="xq-bold xq-white numstel">云报价次数</div>
                  </div>
                  <div class="xq-center" v-if="showCount">
                      <div class="xq-bold xq-white numtel"><count-to :startVal="0" :endVal="3000" :duration="2500" />+</div>
                      <div class="xq-bold xq-white numstel">标识管家用户数</div>
                  </div>
              </div>
           </div>
 </div>
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
mounted(){
   this.observeStats()
}
observeStats() {
    const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
        this.showCount = true // 当元素进入视口时,显示计数
        observer.disconnect() // 只触发一次
      }
    })
    observer.observe(this.$refs.statsSection) // 观察 statsSection 元素
 }

滚动到某个区域才显示

 

posted @   小小强学习网  阅读(103)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版
历史上的今天:
2020-10-27 vue-element在tab切换的时候echarts设置容器宽度设置为100%只显示100px宽度
点击右上角即可分享
微信分享提示