vue 数字滚动加载

效果:

组件封装:

html 复制代码
<template>
    <div>
        <div v-for="(item, index) in total" :key="index" class="real-time-num" :style="{width:`${countWidth}px`,height:`${countHeight}px`,lineHeight:`${countHeight}px`,
        fontSize:`${countFontsize}px`,
        border:couuntBoder?'none':'2px solid #47e2ff',
        boxShadow:couuntBoder?'none': '0px 0px 22px 8px #0158cf inset'}">
            <div class="real-time-num-item" style="transition: all 1s ease-out; "
                :style="{ transform: item != ',' && item != '.' ? `translateY(-${item * countHeight}px)` : `translateY(-${10 * countHeight}px)` }">
                <div :style="{width:`${countWidth}px`,height:`${countHeight}px`}">0</div>
                <div :style="{width:`${countWidth}px`,height:`${countHeight}px`}">1</div>
                <div :style="{width:`${countWidth}px`,height:`${countHeight}px`}">2</div>
                <div :style="{width:`${countWidth}px`,height:`${countHeight}px`}">3</div>
                <div :style="{width:`${countWidth}px`,height:`${countHeight}px`}">4</div>
                <div :style="{width:`${countWidth}px`,height:`${countHeight}px`}">5</div>
                <div :style="{width:`${countWidth}px`,height:`${countHeight}px`}">6</div>
                <div :style="{width:`${countWidth}px`,height:`${countHeight}px`}">7</div>
                <div :style="{width:`${countWidth}px`,height:`${countHeight}px`}">8</div>
                <div :style="{width:`${countWidth}px`,height:`${countHeight}px`}">9</div>
                <div class="symbol" :style="{width:`${countWidth}px`,height:`${countHeight}px`}">
                    <span class="comma" v-if="item==','" :style="{top:`${countTop}px`}">{{ item }}</span>
                    <span class="drop" v-if="item=='.'">{{ item }}</span>
                </div>
            </div>
        </div>
        <span class="label">{{ unit }}</span>
    </div>
</template>
<script>
export default {
    props: {
        totalCounts: [],
        countWidth:"",
        countHeight:"",
        unit:"",
        countFontsize:"",
        countTop:"",
        couuntBoder:true,
    },
    data() {
        return {
            total: []
        }
    },
    watch: {
        totalCounts: function (val) {
            if (val && val.length) {
                this.total = Array(val.length).fill(0)
                setTimeout(() => {
                    this.total = this.totalCounts
                    console.log(this.total, 'this.totalCounts2');
                }, 1000);

            }

        }
    }
};
</script>
<style></style>
<style lang="scss" scoped>
.real-time-num {
    display: inline-block;
    margin-left: 3px;
    text-align: center;
    overflow: hidden; // 隐藏内容
}

.real-time-num>div {
    font-family: "Yourname";
}

.real-time-num-item {
    transition: all 1s ease-out;
}

.label {
    font-size: 20px;
    height: 5px;
}

.symbol {
    position: relative;

    .comma {
        position: absolute;
    }
}
</style>

父组件使用:

html:

html 复制代码
<Num :totalCounts="totalCounts"  countWidth="46" countHeight="56" unit="m³" countFontsize="52" countTop="32"/>

js:

javascript 复制代码
import Num from './num.vue'
components: {Num}

最初参考文章:如何实现大屏数字滚动效果_大数据看板 实时消息 滚动展示-CSDN博客

可是我就是滚动不起来,直接就到最终结果的数字了!!!

后来不信邪,必须整出来,我发现改变数字就可以动态渲染会滚动于是:

javascript 复制代码
       this.total = Array(val.length).fill(0)
       setTimeout(() => {
           this.total = this.totalCounts
       }, 1000);

这是就是根据刚传过来的数组,初始化位数为传过来的长度以0填充

使用延时器再赋值成真实的数据就可以滚起来了!!!!

后面就是根据使用在不用的地方【 宽、高、字号、要不要边框】这些样式动态传就可以了~

打铁还需自身硬啊 寄希望于他人不如自救! 周五快乐~~

相关推荐
艾小码几秒前
还在用Vue 2硬撑?升级Vue 3的避坑指南来了!
前端·javascript·vue.js
是晓晓吖几秒前
page.waitForResponse 执行环境:页面还是 Node.js?
前端·puppeteer
三十_2 分钟前
【Docker】学习 Docker 的过程中,我是这样把镜像越做越小的
前端·后端·docker
Mintopia3 分钟前
🌐 交互式 AIGC:Web 端实时反馈生成的技术架构设计
前端·javascript·aigc
蓝天星空4 分钟前
ES6-Promise用法
前端·javascript·es6
诗书画唱7 分钟前
解决HTML/JS开发中的常见问题与实用资源
前端·javascript·html
Mintopia8 分钟前
🚀 Next.js 自建部署全家桶:Docker + PM2 + Nginx
前端·javascript·全栈
鹏多多11 分钟前
详解vue渲染函数render的使用
前端·javascript·vue.js
定栓15 分钟前
Typescript入门-JSDoc注释及tsconfig讲解
前端·javascript·typescript
AJi16 分钟前
EGL使用记录
前端·opengl