vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn。
你可以设置 startVal 和 endVal,它会自动判断计数或倒计时。
安装使用:
npm install vue-count-to --save
引用详细见下文:import countTo from 'vue-count-to'
<template>
<div class="market-data">
<ul>
<li>
<countTo ref='example1' :startVal="900" :endVal='1000' :duration='3000'></countTo >亿+
<p>2020年线上交易额突破</p>
</li>
<li class="market-tips">
<a></a>
</li>
<li>
<countTo ref='example2' :startVal="800" :endVal='923' :duration='3000'></countTo >万吨
<p>累计实现铜、铝合计线上交易量</p>
</li>
<li class="market-tips">
<a></a>
</li>
<li>
<countTo ref='example3' :startVal="0" :endVal='3' :duration='2000'></countTo >位
<p>2019年西安市百强企业”榜单</p>
</li>
<li class="market-tips">
<a></a>
</li>
<li>
<countTo ref='example4' :startVal="0" :endVal='9' :duration='2000'></countTo >位
<p>2019“陕西企业100强”榜单</p>
</li>
</ul>
</div>
</template>
<script>
import countTo from 'vue-count-to';
export default {
components: { countTo },
data() {
return {
}
},
mounted () {
window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
window.removeEventListener('scroll', this.scrollToTop)
},
methods: {
scrollToTop () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
this.scrollTop = scrollTop;
if (this.scrollTop > 100) {
this.$refs.example1.start();
this.$refs.example2.start();
this.$refs.example3.start();
this.$refs.example4.start();
}
}
}
}
</script>
