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填充

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

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

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

相关推荐
golang学习记1 分钟前
从0死磕全栈之Next.js 自定义 Server 指南:何时使用及如何实现
前端
张可爱2 分钟前
从奶茶店悟透 JavaScript:递归、继承、浮点数精度、尾递归全解析(通俗易懂版)
前端
梵得儿SHI17 分钟前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
八月ouc31 分钟前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
苏琢玉35 分钟前
从 Hexo 到 Astro:重构我的个人博客
前端·hexo
Glommer38 分钟前
某音 Js 逆向思路
javascript·逆向
街尾杂货店&41 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈43 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
金梦人生2 小时前
Css性能优化
前端·css