vue中写一个文字滚动小功能~

项目中要用到文字滚动，就写了一个~

<template>
  <div class="leftTopBox">
    <div id="demo">
      <div class="nwwest-roll" id="nwwest-roll">
        <ul id="roll-ul" class="roll-ul">
          <li
            v-for="(item, index) in valList"
            ref="rollul"
            :class="{ anim: anim == true }"
            :key="index"
          >
            <span class="name">{{ item }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      valList: [0, 0],
      anim: true
    }
  },
  props: {
    valNum: {
      type: Number
    }
  },
  // 如果使用serverData传过来的静态数据 请使用mounted()方法 并注释掉watch
  mounted() {},
  watch: {
    valNum(newV, oldV) {
      this.valList = [newV, oldV]
      setTimeout(() => {
        this.scroll(this.$refs.rollul)
      }, 50)
    }
  },
  methods: {
    scroll(el, type) {
      //字体动画
      //   console.log(el, type)
      el[0].style.marginTop = '-50px' // 按字体盒子大小来设置
      this.anim = !this.anim
      var that = this
      setTimeout(function() {
        el[0].style.marginTop = '0px'
        that.anim = !that.anim
      }, 10)
    }
  }
}
</script>
<style lang="scss" scoped>
.leftTopBox {
  width: 50%;
  .nwwest-roll {
    font-size: 40px;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
  }

  .roll-ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .nwwest-roll li {
    height: 50px;
    line-height: 50px;
  }

  .anim {
    transition: all 1.5s;
  }
}
</style>

—记录方便以后使用，文字翻滚效果