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

小小强学习网 / 2025-01-25 / 原文

<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 元素
 }

滚动到某个区域才显示