ElementUI实现列表滚动展示

codeMing_

已于 2022-08-10 22:08:52 修改

阅读量7.5k

点赞数

文章标签： vue js

于 2020-07-27 09:34:37 首次发布

本文链接：https://blog.csdn.net/q879936814/article/details/107604710

版权

想要的效果是将列表滚动展示，滚动到底就回到第一个，继续滚动。
思路：肯定要用scrollTop(往上滚动)，然后用定时器来控制它，鼠标悬浮就清除定时器，移开就重启！

Ok上代码

这是我想滚动的部分

    <div ref="message" class="messages">
      <div ref="infobord1" class="content-issue">
        <p v-for="(item,index) in messages" :class="[index%2==0?'allP':'']">
          <!-- 鼠标停留出现tips -->
          <el-tooltip placement="top">
            
            <div slot="content">
              {{item.result}}:{{item.message}}
              <!-- <br />{{item.info}} -->
            </div>
            <div class="content">
              <i :class="[item.result=='正常'?'isErr':'']"></i>
              <span class="content-item">{{item.driverNo}}</span>
              <span class="content-item">{{item.dreverName}}</span>
              <span class="content-item">{{item.result}}</span>
            </div>
          </el-tooltip>
        </p>
      </div>
    </div>

这是控制滚动的方法

    rollText: function () {
      var speed = 20;
      var that = this;
      function Marquee() {
        //    that.rollContainer.offsetHeight - that.rollContainer.scrollTop <=
        //   -(that.rollContainer.scrollTop / 2)
        // console.log(that.message);
        if (
        //这里控制滚动到底回顶
          that.message.scrollTop >=
          that.infobord1.offsetHeight - that.message.clientHeight
        ) {
          that.message.scrollTop = 0;
        } else {
          that.message.scrollTop++;
          // console.log(111);
          // console.log(that.message.scrollTop);
          // console.log(that.infobord1.offsetTop);
        }
      }
      var MyMar = setInterval(Marquee, speed); //设置定时器
      //鼠标移上时清除定时器达到滚动停止的目的

      this.message.addEventListener("mouseover", function () {
        clearInterval(MyMar);
      });
      //鼠标移开时重设定时器
      this.message.addEventListener("mouseout", function () {
        MyMar = setInterval(Marquee, speed);
      });
    }