vue-countTo---简单好用的一个数字滚动插件

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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容