利用vue动画渲染实现ul中li标签的定时滚动效果

利用vue动画渲染实现ul中li标签的定时滚动效果

近来公司业务新需求需要写一个大屏页面，由于大屏展示的数据量有限，因此很多地方需要用到页面的滚动效果，如图所示，以下两张图实际上都是动态的向上翻滚的效果，代码是以第一张图为例

vue官方文档====>vue关于动画的官方文档

1.DOM渲染

<template lang="pug">
.policyoutput
  .echarts-title
    span.dot
    span.echarts-titleL 末端空调状态
  transition-group(name='list', tag='div')
    .output-list(v-for='(item, index) in data', :key='item.id')
      .descName {{ item.name }}
      .desc {{ item.outLetTemperature }}
        p 出风温度
      .desc {{ item.returnTemperature }}
        p 回风温度
      .desc.green {{ item.fanSpeed }}
        p 转速
      .desc.green {{ item.waterValve }}
        p 水阀门开度
</template>

如官方文档所说，在需要实现动画效果的盒子外层套上一层transition-group标签，同时注意name的取值，这关系到css中类名的写法：transition-group(name='list', tag='div')，另外内部包裹的.output-list(v-for='(item, index) in data', :key='item.id')，类似于ul中的li标签，需要给它设定一个唯一标识key值。这个值如果接口中有返回，则用接口的返回值（一般都是id），如果没有的话则下载一个uuid依赖插件（这个方法文章后面补充），生成一个随机码，作为该标签的唯一标识。

补充：uuid的使用方法

1. npm install uuid --save ；安装uuid
2. import { v4 as uuidv4 } from ‘uuid’； 在文件中导入
3. policyoutputs = res.map((v) => { let id = uuidv4(); return { ...v, id, }; });
   在接口返回的数据中插入id值

2.js部分，主要是调用接口数据，以及利用定时器对展示的数据进行定时插入和删除

import { getStates } from '@/api/bigScreen';
import { v4 as uuidv4 } from 'uuid';

var policyoutputs = [];  //这里存的是接口返回的所有数据

export default {
  data() {
    return {
      show: true,
      policyoutputs,
      index: 2,
      timer: null,
      data: [],  //这里存的是页面上显示的数据，通过filter过滤出policyoutputs前三条数据
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      await getStates({}).then((res) => {
        console.log(res);
        policyoutputs = res.map((v) => {
          let id = uuidv4();
          return {
            ...v,
            id,
          };
        });
        this.data = policyoutputs.filter((v, i) => i < 3);
      });
      this.animation();
    },
    animation() {
      if (policyoutputs.length > 3) {
        this.timer = setTimeout(() => {
          this.index++;
          if (this.index === policyoutputs.length) {
            this.index = 0;
          }
          this.data.push(Object.assign({}, policyoutputs[this.index]));
          this.data.shift();
          this.animation();
        }, 5000);  //每隔5秒中对data数据进行插入和删除
      } else {
        return false;
      }
    },
    beforeDestroy() {
      clearInterval(this.timer);
      this.timer = null;
    },
  },
};

3.css部分

<style lang="stylus" scoped>
.policyoutput
  // overflow hidden
  height 264px
  background-color #fff
  padding 0 27px
  .echarts-title
    height 34px
    color #86f1ff
    padding-top 10px
    overflow hidden
    .echarts-titleL
      float left
      padding 0 15px
    span.dot
      margin 4px -5px 0 0px
      border 2px solid rgb(23, 79, 113)
      box-sizing border-box
      border-radius 50%
      display inline-block
      float left
      width 10px
      height 10px
      background-color rgb(110, 222, 250)
  .output-list
    margin 0 0 18px 0
    color #7fc4ff
    display flex
    height 60px
    &:last-child
      border-bottom 0
    .descName
      width 110px
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
    .descName::before
      display inline-block
      content ''
      height 100%
      vertical-align middle
    .desc
      width 85px
      height 47px
      text-align center
      line-height 7px
      padding-top 10px
      font-size 15px
      color #53f3ff
      margin auto
      background url('../../assets/image/border.png') no-repeat
      p
        font-size 12px
        color #7fc4ff
    .desc.green
      color rgb(45, 246, 187)
  .list-leave-active                        // 这里的list类名与dom中的transition-group标签name属性一致   
    position absolute // 必须加绝对定位÷
    width 497px
  .list-move, .list-enter-active, .list-leave-active
    transition all 1.25s
  .list-enter
    opacity 0
    transform translateY(50px)
  .list-leave-to
    opacity 0
    transform translateY(-50px)
</style>