vue-count-to (數字滾動組件)
參考地址:http://www.rzrgm.cn/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>
mounted(){
this.observeStats()
}
observeStats() {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
this.showCount = true // 當元素進入視口時,顯示計數
observer.disconnect() // 只觸發一次
}
})
observer.observe(this.$refs.statsSection) // 觀察 statsSection 元素
}
滾動到某個區域才顯示

浙公網安備 33010602011771號