vue做多行滚动广告牌

vue做多行滚动广告牌

利用vue可以很方便的做多行滚动广告牌的，内容和行数自己设定。滚动的方式也可以自己去优化和改进，现在说一下实现方式。利用的是数组的元素移动的原理。真正实现滚动效果的是vue里面对数据的操作。
ps：没有考虑这种方式的消耗等，只是一种实现方式。
h5代码：

	<div class="notice">
      <div class="noticeTitle">
        <span>公&nbsp;&nbsp;告</span>
      </div>
      <div class="textBox">
        <div class="message">
          <a href="#">
            {{textArr[0].tag}}：{{textArr[0].title}}
          </a>
        </div>
        <div class="message">
          <a href="#">
            {{textArr[1].tag}}：{{textArr[1].title}}
          </a>
        </div>
        <div class="message">
          <a href="#">
            {{textArr[2].tag}}：{{textArr[2].title}}
          </a>
        </div>
        <div class="message">
          <a href="#">
            {{textArr[3].tag}}：{{textArr[3].title}}
          </a>
        </div>
      </div>
    </div>

css的代码：

.notice {
    width: 94%;
    height: 35%;
    margin: 20px auto;
    // border: 2px solid #888888;
    border-radius: 5px;
    
    .noticeTitle {
      font-size: 25px;
      text-align: center;
      margin: 5px auto;
      color: red;
      font-weight: bolder;
    }
    .textBox {
      font-size: 16px;
      
      .message {
        width: 90%;
        margin: 5px auto;
        height: 30px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    
  }

vue的代码：

<script>
  export default {
    data() {
      return {
        animate: false,
        textArr: [
          {tag: '精彩推荐', title: '11111111111111'},
          {tag: '公司公告', title: '22222222222222222222'},
          {tag: '公司公告', title: '2333333333333333'},
          {tag: '公司公告', title: '4444444444'},
          {tag: '公司公告', title: '5555555555555555555'},
          {tag: '公司公告', title: '666666666666666666'},
          {tag: '公司公告', title: '6777777777777777777777'},
          {tag: '公司公告', title: '8888888888888888888888'},
          {tag: '公司公告', title: '99999999999999999999999'},
        ],
      };
    },
    // created () {
    //   setInterval (this.scroll, 1000)
    // },
    methods: {
      switchFarm() {
        this.$u.navigate('/switchFarm/')
      },
      scroll () {
        this.animate = true;
        setTimeout(() =>{
          this.textArr.push(this.textArr[0])
          this.textArr.shift()
          this.animate=false
        }, 500)
      }
    },
    mounted () {
      setInterval (this.scroll, 3000)
    },
    beforeDestroy () {}
  };
</script>