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 元素 } |
滚动到某个区域才显示
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
2020-10-27 vue-element在tab切换的时候echarts设置容器宽度设置为100%只显示100px宽度