携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情

最近在做大屏，总结一下项目中遇到的一些技术。大屏一般是所见即所得，所有的内容都展示在上面，所以滚动显示就很有必要了。制作滚动的数字和表格，我们一起看看吧~

滚动的表格

我用的vue-seamless-scroll，很方便，开箱即用

1. 安装

cnpm install vue-seamless-scroll --save

2. 引入

在main.js中注册

import VueSeamlessScroll from 'vue-seamless-scroll'
Vue.use(VueSeamlessScroll)

局部引用

import vueSeamlessScroll from "vue-seamless-scroll"; // 注册 
components: { 
    vueSeamlessScroll
},

3. 配置

一些基本配置，根据项目需要设置

computed:{
    optionSetting() {
        return {
            step: 0.4, // 数值越大速度滚动越快
            limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
            hoverStop: true, // 是否开启鼠标悬停stop
            direction: 1, // 0向下 1向上 2向左 3向右
            openWatch: true, // 开启数据实时监控刷新dom
            singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
            singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
            waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        };
    },
},

4. 实例

<div class="my-table">
    <div class="table_th">
        <span>设备编号</span>
        <span>设备位置</span>
        <span>设备状态</span>
        <span>设备类型</span>
    </div>
    <vue-seamless-scroll
            :data="tableData"
            class="table-list"
            :class-option="optionSetting"
    >
        <div class="table_td"
             v-for="item in tableData"
             :key="item.num"
             @click="tabs(item)"
        >
            <span>{{item.num}}</span>
            <span>{{item.place}}</span>
            <span :class="item.status == '正常' ? 'green-color':'red-color'">{{item.status}}</span>
            <span>{{item.type}}</span>
        </div>
    </vue-seamless-scroll>
</div>

5. 效果

滚动的数字

1. html

<div class="chartNum">
    <div class="box-item">
        <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item),'number-item3':index == 2}"
            v-for="(item,index) in vanceNum"
            :key="index">
                    <span v-if="!isNaN(item)">
                        <i ref="numberItem">0123456789</i>
                    </span>
            <span class="comma" v-else>{{item}}</span>
        </li>
        <span class="que">，</span>
    </div>
</div>

2. js代码

vanceNum: ['1','2','3','4','5','6'],
maxLen: 6,

// 获取随机数
getRandomNumber(min ,max){
    return Math.floor(Math.random() * (max - min)) + min;
},

// 定时获取次数
increaseNumberFn(){
    setInterval(this.increaseNumber, 3000);
    this.clear()
},

// 定时增长数字
increaseNumber(){
    let sum = 0;
    for (let i = 0; i < this.vanceNum.length; i++) {
        sum += this.vanceNum[i];
    }
    this.vanceNum = Number(sum) + this.getRandomNumber(1, 100);
    this.toFormatNum(this.vanceNum);
    this.setNumberTransform();
},

// 设置文字滚动
setNumberTransform() {
    const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
    if(this.vanceNum > 999999){
        this.vanceNum = 0;
    }
    const numberArr = this.vanceNum.filter(item => !isNaN(item));
    // 结合CSS 对数字字符进行滚动,显示场馆人次数量
    if(numberItems && numberItems.length){
        for (let index = 0; index < numberItems.length; index++) {
            const elem = numberItems[index];
            elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
        }
    }
},

// 处理场馆人次
toFormatNum(num) {
    num = num.toString();
    // 把场馆人次数变成字符串
    if (num.length < this.maxLen) {
        num = '0' + num; // 如未满八位数，添加"0"补位
        this.toFormatNum(num); // 递归添加"0"补位
    } else if (num.length === this.maxLen) {
        // num = num.slice(0, 3) + ',' + num.slice(3, this.maxLength);
        this.vanceNum = num.split(''); // 将其便变成数据，渲染至滚动数组
    } else {
        this.vanceNum = ['1','2','3','4','5','6'];
        // 场馆人次总量数字超过显示异常
        // this.$message.warning('场馆人次总量数字过大，显示异常')
    }
},

3. 效果