vue实现数据滚动。vue实现列表自动滚动的方式

电脑版发表于：2023/3/9 16:23

### 代码如下
代码是在原有基础上增加了一点测试数据就可以运行的
```
<template>
    <div class="orderProcess">
      <div class="loading_div" v-show="!showFlag">
        
        <div>Loading222...</div>
      </div>
      <div class="success_info_body" v-show="showFlag">
        <div class="table_head">
          <div class="tr1 tr">订单号</div>
          <div class="tr2 tr">项目名称</div>
          <div class="tr3 tr">需求方量</div>
          <div class="tr4 tr">预交付日期</div>
          <div class="tr5 tr">进度</div>
        </div>
        <div class="table_body">
          
          <div class="table_list" :style="{top: tableTop + 'px'}"> 
            <div
              class="tr_div"
              v-for="(item,index) in tableList"
              :key="index"
              :class="{'exception_style_tr':item.overDays>6 && item.process < 100}"
            >
              <div
                class="tr1 tr"
                :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}"
              >{{item.orderNo}}</div>
              <div
                class="tr2 tr"
                :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}"
              >{{item.projectName}}</div>
              <div
                class="tr3 tr"
                :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}"
                v-if="item.needVol!='-'&&item.needVol!='无法计算'"
              >{{Number(item.needVol).toFixed(3)}} m3</div>
              <div
                class="tr3 tr"
                :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}"
                v-else
              >-</div>
              <div
                class="tr4 tr"
                :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}"
              >{{item.completeDate}}</div>
              <div
                class="tr5 tr"
                :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}"
                v-if="item.process!='-'"
              >{{Number(item.process).toFixed(2)}} %</div>
              <div
                class="tr5 tr"
                :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}"
                v-else
              >-</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  
  <script>
  export default {
    data() {
      return {
        tableTimer: null,
        tableTop: 0,  //列表向上移动的像素
        tableList: [{
            overDays:7,
            process:60,
            orderNo:1,
            projectName:"xx",
            needVol:30
        },
        {
            overDays:7,
            process:60,
            orderNo:2,
            projectName:"xx",
            needVol:30
        },
        {
            overDays:7,
            process:60,
            orderNo:3,
            projectName:"xx",
            needVol:30
        },
        {
            overDays:7,
            process:60,
            orderNo:4,
            projectName:"xx",
            needVol:30
        },
        {
            overDays:7,
            process:60,
            orderNo:5,
            projectName:"xx",
            needVol:30
        },
        {
            overDays:7,
            process:60,
            orderNo:6,
            projectName:"xx",
            needVol:30
        },
        {
            overDays:7,
            process:60,
            orderNo:7,
            projectName:"xx",
            needVol:30
        },
        {
            overDays:7,
            process:60,
            orderNo:8,
            projectName:"xx",
            needVol:30
        },
        {
            overDays:7,
            process:60,
            orderNo:9,
            projectName:"xx",
            needVol:30
        }
        ], //tableList是列表的数据对象
        showFlag: false,
        componentTimer: null,
        maxCanSee: 6, //maxCanSee代表可视范围内的最大完整数据条数
        tableLineHeight: 45   //tableLineHeight代表列表中一行的高度
      };
    },
    props: ["activeFactoryId"],
    watch: {
      activeFactoryId() {
        clearInterval(this.componentTimer);
        this.bsGetOrderProcessList();
        this.componentTimerFun();
      }
    },
    beforeDestroy() {
      clearInterval(this.componentTimer);
      clearInterval(this.tableTimer);
    },
    mounted() {
        // 模拟触发一下值变化，就可以触发watch
        this.activeFactoryId="aa"
    },
    methods: {
      bsGetOrderProcessList() {
        clearInterval(this.tableTimer);
        this.tableTop = 0;
        if (this.activeFactoryId != "") {
          //this.showFlag = false;
          
          this.showFlag = true;
          this.actionFun();
        //   this.$ajax({
        //     method: "get",
        //     url: ``  //接口地址，不公开
        //   })
        //     .then(res => {
        //       this.tableList = res.data.data;
        //       this.showFlag = true;
        //       this.actionFun();
        //     })
        //     .catch(function(err) {
        //       console.log("bsGetOrderProcessList error!");
        //     });
        }
      },
      actionFun() {
        //超过6行才滚动
        if (this.tableList.length > 6) {
          this.tableTimerFun();
        }
        //没有超过6行就不滚动了 
        else {
          this.fillTableList();
        }
        this.showFlag = true;
      },
      fillTableList() {
        var addLength = this.maxCanSee - this.tableList.length;
        for (var i = 0; i < addLength; i++) {
          this.tableList.push({
            orderNo: "-",
            projectName: "-",
            needVol: "-",
            completeDate: "-",
            process: "-"
          });
        }
      },
      tableTimerFun() {
        var count = 0;  //每滚动一次，count加1
        if (this.tableList.length > this.maxCanSee) {  //tableList是列表的数据对象，maxCanSee代表可视范围内的最大完整数据条数
          this.tableTimer = setInterval(() => {
            if (count < this.tableList.length - this.maxCanSee) { //如果还没滚动到最后一条数据，则列表向上移动以上的高度
              this.tableTop -= this.tableLineHeight;   //tableLineHeight代表列表中一行的高度
              count++;   //每滚动一次，count加1
            } else {   //如果滚动到最后一条，则恢复初始状态
              count = 0;
              this.tableTop = 0;
            }
          }, 3000);
        }
      },
      componentTimerFun() {
        this.componentTimer = setInterval(() => {
          this.bsGetOrderProcessList();
        }, 3600000);
      }
    }
  };
  </script>
   
  <style scoped>
  .orderProcess {
    width: 600px;
    height: 313px;
  }
  .loading_div {
    color: #eee;
    padding-top: 100px;
  }
  .table_head {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: rgba(90, 127, 200, 0.5);
    display: flex;
    color: #eee;
    text-align: center;
    font-size: 15px;
  }
  .tr1 {
    width: 25%;
  }
  .tr2 {
    width: 25%;
  }
  .tr3 {
    width: 18%;
  }
   
  .tr4 {
    width: 18%;
  }
  .tr5 {
    flex: 1;
  }
  .tr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 5px;
    text-align: center;
    font-size: 14px;
  }
   
  .table_body {
    width: 100%;
    height: 270px;
    overflow: hidden;
    position: relative;
  }
   
  .table_list {
    width: 100%;
    position: absolute;
    transition: all 0.5s;
  }
   
  .tr_div {
    width: 100%;
    display: flex;
    color: #eee;
    text-align: center;
    line-height: 45px;
    font-size: 13px;
  }
  .exception_style_tr {
    animation: exception_style_tr 0.8s linear;
    -moz-animation: exception_style_tr 0.8s linear;
    -webkit-animation: exception_style_tr 0.8s linear;
    -o-animation: exception_style_tr 0.8s linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
  }
  @keyframes exception_style_tr {
    0% {
      background: rgba(3, 145, 167, 0.1);
    }
    50% {
      background: rgba(250, 4, 4, 0.15);
    }
    100% {
      background: rgba(3, 145, 167, 0.1);
    }
  }
   
  @-moz-keyframes exception_style_tr {
    0% {
      background: rgba(3, 145, 167, 0.1);
    }
    50% {
      background: rgba(250, 4, 4, 0.15);
    }
    100% {
      background: rgba(3, 145, 167, 0.1);
    }
  }
  @-webkit-keyframes exception_style_tr {
    0% {
      background: rgba(3, 145, 167, 0.1);
    }
    50% {
      background: rgba(250, 4, 4, 0.15);
    }
    100% {
      background: rgba(3, 145, 167, 0.1);
    }
  }
  @-o-keyframes exception_style_tr {
    0% {
      background: rgba(3, 145, 167, 0.1);
    }
    50% {
      background: rgba(250, 4, 4, 0.15);
    }
    100% {
      background: rgba(3, 145, 167, 0.1);
    }
  }
  .exception_style {
    font-weight: bold;
    animation: exception_style 0.8s linear;
    -moz-animation: exception_style 0.8s linear;
    -webkit-animation: exception_style 0.8s linear;
    -o-animation: exception_style 0.8s linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
  }
  @keyframes exception_style {
    0% {
      color: #eee;
    }
    50% {
      color: #fa0404;
    }
    100% {
      color: #eee;
    }
  }
   
  @-moz-keyframes exception_style {
    0% {
      color: #eee;
    }
    50% {
      color: #fa0404;
    }
    100% {
      color: #eee;
    }
  }
  @-webkit-keyframes exception_style {
    0% {
      color: #eee;
    }
    50% {
      color: #fa0404;
    }
    100% {
      color: #eee;
    }
  }
  @-o-keyframes exception_style {
    0% {
      color: #eee;
    }
    50% {
      color: #fa0404;
    }
    100% {
      color: #eee;
    }
  }
  .notice_style {
    font-weight: bold;
    color: #d1ce02;
  }
   
  </style>
```

原文：https://blog.csdn.net/zxczero/article/details/126104905

小可爱

vue实现数据滚动。vue实现列表自动滚动的方式

{{item.title}}