ElementUI实现列表滚动展示

想要的效果是将列表滚动展示,滚动到底就回到第一个,继续滚动。
思路:肯定要用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);
      });
    }

实现需求~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值