资讯专栏INFORMATION COLUMN

vue实现列表无缝循环滚动

3403771864 / 1568人阅读

  vue如何为大家展示列表无缝循环滚动,以下就是具体代码内容如下:

  功能介绍:

  在PC端、大数据、官网、后台管理平台开发项目中,时常会要求展示这种列表循环滚动。

  大致需求:

  1、列表内容可以循环展示;

  2、每条内容展示时间间距几秒;

  3、可以形成走马灯样式效果;

  整体思路:

  1、使用两个定时器嵌套实现;

  2、需要两个相同容器存放同样内容,实现无缝衔接效果;

  效果展示:

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
  <style>
  /* 滚动表格最外层 */
  .tableoOut {
  margin: 100px auto;
  width: 500px;
  height: 400px;
  background: pink;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  }
  .tableBox {
  width: 100%;
  background: #000;
  overflow: hidden
  }
  .tableTit {
  background: #000;
  width: 100%;
  height: 40px;
  color: #858A84;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  .tableInner {
  height: auto;
  }
  .box {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  }
  .box .time {
  color: #858A84;
  }
  .tableoOut .addr, .tableoOut .time, .tableoOut .name {
  box-sizing: border-box;
  padding: 0 5px;text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }
  .tableoOut .addr {
  width: calc(100% - 200px);
  flex-shrink: 0;
  }
  .tableoOut .name, .tableoOut .time {
  width: 100px;
  flex-shrink: 0;
  }
  </style>
  </head>
  <body>
  <div id="app">
  <div class="tableoOut" ref="tableoOut">
  <div class="tableTit">
  <div class="name">姓名</div>
  <div class="addr">地址</div>
  <div class="time">入驻时间</div>
  </div>
  <div class="tableBox" ref="tableBox"
  :style="{height: tableHei}">
  <div class="tableInner" ref="tableInner">
  <div class="box" v-for="item in 7" :key="item">
  <div class="name">{{item}}</div>
  <div class="addr">山东省山东省山东省山东省山东省山东省山东省山东省
  山东省山东省山东省山东省山东省</div>
  <div class="time">2022-05-26</div>
  </div>
  </div>
  <div class="tableInner" v-if="size < 7">
  <div class="box" v-for="item in 7" :key="item">
  <div class="name">{{item}}</div>
  <div class="addr">山东省山东省山东省山东省山东省山东省山东省山东省
  山东省山东省山东省山东省山东省</div>
  <div class="time">2022-05-26</div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </body>
  <script>
  new Vue({
  el: '#app',
  data: {
  tableHei: 'auto',
  timer: null,
  size: 0
  },
  mounted() {
  this.getTable();
  },
  methods: {
  getTable() {
  const outHei = this.$refs.tableoOut.clientHeight - 60;
  this.size = Math.floor(outHei / 50);
  this.tableHei = this.size * 50 + 'px';
  this.scrolls();
  },
  stepScroll() {
  const step = 50;
  let num = 0;
  const tableBox = this.$refs.tableBox;
  const stepTime = setInterval(function () {
  num += 2;
  if (num > step) {
  num = 0;
  clearInterval(stepTime);
  } else {
  tableBox.scrollTop += 2;
  }
  }, 20);
  },
  scrolls() {
  const that = this;
  const tableBox = this.$refs.tableBox;
  const tableInner = this.$refs.tableInner;
  clearInterval(this.timer);
  this.timer = setInterval(function () {
  if(tableBox.scrollTop === tableInner.scrollHeight) {
  tableBox.scrollTop = 0;
  }
  that.stepScroll();
  }, 2000);
  },
  }
  })
  </script>
  </html>

  setInterval踩坑:

  发现这种方法实现的定时轮播,有一阵没访问页面,会出现卡停的情况,采用下面的解决方法:

  <script>
  new Vue({
  el: '#app',
  data: {
  tableHei: 'auto',
  timer: null,
  size: 0,
  stopSign: true, // 判断定时器是否停止标识
  stepTime: null, // 改为全局定时器
  },
  mounted() {
  const that = this;
  // 增加浏览器激活状态判断。非激活状态为onblur
  window.onfocus = function(e) {
  const tableBox = that.$refs.tableBox;
  const sT = tableBox.scrollTop;
  console.log("激活状态!")
  if (!that.stopSign) {
  tableBox.scrollTop = Math.round(sT / 50) * 50;
  clearInterval(that.stepTime);
  }
  }
  this.getTable();
  },
  methods: {
  getTable() {
  const outHei = this.$refs.tableoOut.clientHeight - 60;
  this.size = Math.floor(outHei / 50);
  this.tableHei = this.size * 50 + 'px';
  this.scrolls();
  },
  stepScroll() {
  const that = this;
  const step = 50;
  let num = 0;
  const tableBox = this.$refs.tableBox;
  // 改为全局定时器,且在调用前先进行清空
  clearInterval(this.stepTime);
  this.stepTime = setInterval(function () {
  that.stopSign = false;
  num += 2;
  if (num > step) {
  num = 0;
  clearInterval(that.stepTime);
  that.stopSign = true;
  } else {
  tableBox.scrollTop += 2;
  }
  }, 1000 / 60);
  },
  scrolls() {
  const that = this;
  const tableBox = this.$refs.tableBox;
  const tableInner = this.$refs.tableInner;
  clearInterval(this.timer);
  this.timer = setInterval(function () {
  // 修改定时器结束判断条件
  if(tableBox.scrollTop >= tableInner.scrollHeight) {
  tableBox.scrollTop = 0;
  }
  that.stepScroll();
  }, 2000);
  },
  }
  })
  </script>


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/127719.html

相关文章

  • vue实现消息的无缝滚动效果(完善版)

    ...e-cli ,请自行配置好相应的,环境及路由,这里主要介绍实现的方法 第一步在模板中 使用v-for方法循环出消息列表 样式设置 *{ margin: 0 ; padding: 0; } #box{ width: 300px; height: 32px; overflow: hidden; padding-left: 30px; bord...

    luckyyulin 评论0 收藏0
  • js实现列表自动滚动循环播放

    ...爽,下面看看具体代码:</p><p>  <strong>1.实现效果图</strong></p><p>  鼠标移入,暂停滚动; 鼠标移出,继续滚动;</p><p style="text-align:center"><img src="https://img.jbzj.com/file_images/arti...

    3403771864 评论0 收藏0
  • vue无缝滚动的插件开发填坑分享

    ...vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以实现但是相对来说太重了,于是自己造了个轮子。 3.在这分享下,当时写这个插件的坑,自己也复习下,如果代码上有瑕疵欢迎指出。 源码参考 vue-seamless-scroll 1.简单的实...

    岳光 评论0 收藏0
  • jquery特效:无缝向上循环滚动列表

    ...em1 item2item2item2 item2item2item2 实现思路: 获得js-slide-list下第一个li元素的高度,对它的height或marginTop进行一个从有到无的动画变化,代码如下: var doscroll = function(){ var $parent = $(".js-slide-list"); va...

    hot_pot_Leo 评论0 收藏0
  • vue-music(1)音乐播发器 项目开发记录

    ...babel-polyfill 对es6的高级语法进行转义当运行环境中并没有实现的一些方法,babel-polyfill 会给其做兼容需要在main.js中引入 npm install babel-runtime --save 辅助编译 不需要引入即可用 babel-runtime 是供编译模块复用工具函数。是锦上添花bab...

    happen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<