资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/vue实现列表无缝循环滚动

vue实现列表无缝循环滚动

3403771864 / 2802人阅读

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

　　功能介绍：

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

　　大致需求：

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

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

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

　　整体思路：

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

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

　　效果展示：

</>复制代码 
  1. 　　<!DOCTYPE html>
  2. 　　<html>
  3. 　　<head>
  4. 　　<meta charset="utf-8">
  5. 　　<title></title>
  6. 　　<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
  7. 　　<style>
  8. 　　/* 滚动表格最外层 */
  9. 　　.tableoOut {
  10. 　　margin: 100px auto;
  11. 　　width: 500px;
  12. 　　height: 400px;
  13. 　　background: pink;
  14. 　　overflow: hidden;
  15. 　　display: flex;
  16. 　　align-items: center;
  17. 　　justify-content: center;
  18. 　　flex-direction: column;
  19. 　　}
  20. 　　.tableBox {
  21. 　　width: 100%;
  22. 　　background: #000;
  23. 　　overflow: hidden
  24. 　　}
  25. 　　.tableTit {
  26. 　　background: #000;
  27. 　　width: 100%;
  28. 　　height: 40px;
  29. 　　color: #858A84;
  30. 　　text-align: center;
  31. 　　display: flex;
  32. 　　justify-content: center;
  33. 　　align-items: center;
  34. 　　}
  35. 　　.tableInner {
  36. 　　height: auto;
  37. 　　}
  38. 　　.box {
  39. 　　width: 100%;
  40. 　　height: 50px;
  41. 　　display: flex;
  42. 　　justify-content: center;
  43. 　　align-items: center;
  44. 　　color: #fff;
  45. 　　}
  46. 　　.box .time {
  47. 　　color: #858A84;
  48. 　　}
  49. 　　.tableoOut .addr, .tableoOut .time, .tableoOut .name {
  50. 　　box-sizing: border-box;
  51. 　　padding: 0 5px;text-align: center;
  52. 　　overflow: hidden;
  53. 　　white-space: nowrap;
  54. 　　text-overflow: ellipsis;
  55. 　　}
  56. 　　.tableoOut .addr {
  57. 　　width: calc(100% - 200px);
  58. 　　flex-shrink: 0;
  59. 　　}
  60. 　　.tableoOut .name, .tableoOut .time {
  61. 　　width: 100px;
  62. 　　flex-shrink: 0;
  63. 　　}
  64. 　　</style>
  65. 　　</head>
  66. 　　<body>
  67. 　　<div id="app">
  68. 　　<div class="tableoOut" ref="tableoOut">
  69. 　　<div class="tableTit">
  70. 　　<div class="name">姓名</div>
  71. 　　<div class="addr">地址</div>
  72. 　　<div class="time">入驻时间</div>
  73. 　　</div>
  74. 　　<div class="tableBox" ref="tableBox"
  75. 　　:style="{height: tableHei}">
  76. 　　<div class="tableInner" ref="tableInner">
  77. 　　<div class="box" v-for="item in 7" :key="item">
  78. 　　<div class="name">{{item}}</div>
  79. 　　<div class="addr">山东省山东省山东省山东省山东省山东省山东省山东省
  80. 　　山东省山东省山东省山东省山东省</div>
  81. 　　<div class="time">2022-05-26</div>
  82. 　　</div>
  83. 　　</div>
  84. 　　<div class="tableInner" v-if="size < 7">
  85. 　　<div class="box" v-for="item in 7" :key="item">
  86. 　　<div class="name">{{item}}</div>
  87. 　　<div class="addr">山东省山东省山东省山东省山东省山东省山东省山东省
  88. 　　山东省山东省山东省山东省山东省</div>
  89. 　　<div class="time">2022-05-26</div>
  90. 　　</div>
  91. 　　</div>
  92. 　　</div>
  93. 　　</div>
  94. 　　</div>
  95. 　　</body>
  96. 　　<script>
  97. 　　new Vue({
  98. 　　el: '#app',
  99. 　　data: {
  100. 　　tableHei: 'auto',
  101. 　　timer: null,
  102. 　　size: 0
  103. 　　},
  104. 　　mounted() {
  105. 　　this.getTable();
  106. 　　},
  107. 　　methods: {
  108. 　　getTable() {
  109. 　　const outHei = this.$refs.tableoOut.clientHeight - 60;
  110. 　　this.size = Math.floor(outHei / 50);
  111. 　　this.tableHei = this.size * 50 + 'px';
  112. 　　this.scrolls();
  113. 　　},
  114. 　　stepScroll() {
  115. 　　const step = 50;
  116. 　　let num = 0;
  117. 　　const tableBox = this.$refs.tableBox;
  118. 　　const stepTime = setInterval(function () {
  119. 　　num += 2;
  120. 　　if (num > step) {
  121. 　　num = 0;
  122. 　　clearInterval(stepTime);
  123. 　　} else {
  124. 　　tableBox.scrollTop += 2;
  125. 　　}
  126. 　　}, 20);
  127. 　　},
  128. 　　scrolls() {
  129. 　　const that = this;
  130. 　　const tableBox = this.$refs.tableBox;
  131. 　　const tableInner = this.$refs.tableInner;
  132. 　　clearInterval(this.timer);
  133. 　　this.timer = setInterval(function () {
  134. 　　if(tableBox.scrollTop === tableInner.scrollHeight) {
  135. 　　tableBox.scrollTop = 0;
  136. 　　}
  137. 　　that.stepScroll();
  138. 　　}, 2000);
  139. 　　},
  140. 　　}
  141. 　　})
  142. 　　</script>
  143. 　　</html>

　　setInterval踩坑：

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

</>复制代码 
  1. 　　<script>
  2. 　　new Vue({
  3. 　　el: '#app',
  4. 　　data: {
  5. 　　tableHei: 'auto',
  6. 　　timer: null,
  7. 　　size: 0,
  8. 　　stopSign: true, // 判断定时器是否停止标识
  9. 　　stepTime: null, // 改为全局定时器
  10. 　　},
  11. 　　mounted() {
  12. 　　const that = this;
  13. 　　// 增加浏览器激活状态判断。非激活状态为onblur
  14. 　　window.onfocus = function(e) {
  15. 　　const tableBox = that.$refs.tableBox;
  16. 　　const sT = tableBox.scrollTop;
  17. 　　console.log("激活状态！")
  18. 　　if (!that.stopSign) {
  19. 　　tableBox.scrollTop = Math.round(sT / 50) * 50;
  20. 　　clearInterval(that.stepTime);
  21. 　　}
  22. 　　}
  23. 　　this.getTable();
  24. 　　},
  25. 　　methods: {
  26. 　　getTable() {
  27. 　　const outHei = this.$refs.tableoOut.clientHeight - 60;
  28. 　　this.size = Math.floor(outHei / 50);
  29. 　　this.tableHei = this.size * 50 + 'px';
  30. 　　this.scrolls();
  31. 　　},
  32. 　　stepScroll() {
  33. 　　const that = this;
  34. 　　const step = 50;
  35. 　　let num = 0;
  36. 　　const tableBox = this.$refs.tableBox;
  37. 　　// 改为全局定时器，且在调用前先进行清空
  38. 　　clearInterval(this.stepTime);
  39. 　　this.stepTime = setInterval(function () {
  40. 　　that.stopSign = false;
  41. 　　num += 2;
  42. 　　if (num > step) {
  43. 　　num = 0;
  44. 　　clearInterval(that.stepTime);
  45. 　　that.stopSign = true;
  46. 　　} else {
  47. 　　tableBox.scrollTop += 2;
  48. 　　}
  49. 　　}, 1000 / 60);
  50. 　　},
  51. 　　scrolls() {
  52. 　　const that = this;
  53. 　　const tableBox = this.$refs.tableBox;
  54. 　　const tableInner = this.$refs.tableInner;
  55. 　　clearInterval(this.timer);
  56. 　　this.timer = setInterval(function () {
  57. 　　// 修改定时器结束判断条件
  58. 　　if(tableBox.scrollTop >= tableInner.scrollHeight) {
  59. 　　tableBox.scrollTop = 0;
  60. 　　}
  61. 　　that.stepScroll();
  62. 　　}, 2000);
  63. 　　},
  64. 　　}
  65. 　　})
  66. 　　</script>


GPU云服务器 云服务器 无缝滚动 水平无缝滚动 文字无缝滚动 无缝循环

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

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

相关文章

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

    摘要：在昨天发布完文章之后又整理一下，发现有几处需要改进的地方，今天就及时更新一下，也算是激励自己要保持这种积极的好习惯项目环境，请自行配置好相应的，环境及路由，这里主要介绍实现的方法第一步在模板中使用方法循环出消息列表马云雷军王勤因为在消息 在昨天发布完文章之后又整理一下，发现有几处需要改进的地方，今天就及时更新一下，也算是激励自己要保持这种积极的好习惯 项目环境vue-cli ，请自行配...

    luckyyulin 评论0 收藏0

  • js实现列表自动滚动循环播放

    　　列表自动滚动循环播放不要太爽，下面看看具体代码：　　1.实现效果图　　鼠标移入，暂停滚动； 鼠标移出，继续滚动；　　2.原理　　第一：要实现无缝衔接，在原有ul后面还要有一个一样内容的ul；　　第二：在最外层div为可视区域，设overflow：hidden；　　第三：2个ul的高度 > 外层可视div高度，才能滚动；　　3.实现代码　　html：　　<!--vue--> 　...

    3403771864 评论0 收藏0

  • vue无缝滚动的插件开发填坑分享

    摘要：写插件的初衷项目经常需要无缝滚动效果，当时写的时候用用这个老插件，相对不上很好用。后来转向在没有找到好的无缝滚动插件，除了配置可以实现但是相对来说太重了，于是自己造了个轮子。 写插件的初衷 1.项目经常需要无缝滚动效果，当时写jq的时候用用msClass这个老插件，相对不上很好用。2.后来转向vue在vue-awesome没有找到好的无缝滚动插件，除了配置swiper可以实现但是相对来...

    岳光 评论0 收藏0

  • jquery特效：无缝向上循环滚动列表

    摘要：效果呈现整个列表间隔设定的时间向上移动一个的高度结构设置时，注意高度是显示多少个如的高度是，显示个，高度则是实现思路获得下第一个元素的高度，对它的或进行一个从有到无的动画变化，代码如下或者改成动画结束后，把它插到最后，形成无缝 效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构： title1 title2 ...

    hot_pot_Leo 评论0 收藏0

  • vue-music（1）音乐播发器 项目开发记录

    摘要：在中新建组件许文瑞正在吃屎。。。。在中添加如下代码三歌手组件开发歌手首页开发数据获取数据获取依旧从音乐官网获取歌手接口创建我们和以前一样，利用我们封装的等发放，来请求我们的接口，返回给。 Vue-Music 跟学一个网课老师做的仿原生音乐APP跟学的笔记，记录点滴，也希望对学习vue初学小伙伴有点帮助 showImg(https://segmentfault.com/img/remot...

    happen 评论0 收藏0

发表评论

登陆后可评论

0条评论

3403771864

男|高级讲师
我要私信

TA的文章

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