vue实现文字上下滚动

Posted 2020-12-26 sarah119

实现文字的上下滚动使用positon的relative的top属性，通过动态改变top来实现相关内容的更换，通过transion来实现相关的动画效果，

相关的dom内容

<template>
    <div class="index">
      <div class="scroll">
        <ul :style="{top}" :class="{transition:index!=0}">
          <li v-for="(item,index) in list">
            {{"第"+item+"条数据"}}
          </li>
          <li>
            {{"第"+list[0]+"条数据"}}
          </li>
        </ul>
      </div>
      <router-link to="/">hello</router-link>
    </div>
  </template>

相关css内容

img{width: 30px;height: 30px;border-radius: 50%;vertical-align: middle;margin-right: 20px}
ul{position: relative;}
li{overflow: hidden;white-space: nowrap;  text-overflow:ellipsis;width: 80%;height: 60px;line-height: 60px;text-align: left;margin: 0;font-size: 14px}
.scroll{height:60px;overflow: hidden;font-size: 0px;  position: relative;}
.transition{transition: top 0.5s}

相关script内容

<script>
    export default {
      name: ‘HelloWorld‘,
      data() {
        return {
          list: [
            "一","二","三","四","五","六","七","八","九","十"
          ],
          top: "",
          index: 0,
          p:""
        }
      },
      mounted() {
        this.goScroll()
      },
      methods: {
        goScroll() {
          var _this = this;
          this.p = setInterval(() => {
            console.log(22)
            _this.top = -60 * _this.index + ‘px‘;
            if (_this.index >= this.list.length + 1) {
              _this.index = 0;
              _this.top = -0 + ‘px‘;
              clearInterval(_this.p);
              _this.continueScroll()
            } else {
              _this.index++;
            }
          }, 1000)
        }, 
        continueScroll(){
          var _this=this;
        setTimeout(() => {
          _this.index=1;
        _this.top = -60 * this.index+ ‘px‘;
        _this.index++
         this.goScroll()
        },0);
      }
      },
      destroyed(){
        clearInterval( this.p );
      }
    }
  
  </script>