收藏
便签
笔记
消息
创作
登录
情不知从何起,一往而情深
博主信息
排名
6
文章
199
粉丝
4
评论
3
文章类别
最新文章
最新评价
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

vue自定义table表实现内容上下循环滚动

4334人阅读 2023/3/15 16:10 总访问：1110393 评论：0 收藏：0 手机
分类: 前端

原文：https://blog.csdn.net/weixin_43123984/article/details/125003600

处理了一下只显示正确的数据

  1. <template>
  2.     <div class="left">
  3.         <div class="table">
  4.             <div class="table-header">
  5.                 <div class="table-header-item-title">名称</div>
  6.                 <div class="table-header-item-title">状态</div>
  7.                 <div class="table-header-item-title">数据标题1</div>
  8.                 <div class="table-header-item-title">数据标题2</div>
  9.             </div>
  10.             <div class="scrollWrap" :style="{
  11.                 height: scrollWrapHeight + 'px',
  12.                 overflowY: 'hidden',
  13.             }">
  14.                 <div :class="scrollNum > 1 ? 'scroll' : ''" :style="{
  15.                     animationDuration: time + 's',
  16.                 }" v-for="(a, index) in scrollNum" :key="index">
  17.                     <div class="table-bodySuccess" v-for="(item, index) in successData" :key="index">
  18.                         <div class="table-body-item-title">
  19.                             {{ item.name }}
  20.                         </div>
  21.                         <div class="table-body-item-title">
  22.                             <div class="circle"></div>
  23.                         </div>
  24.                         <div class="table-body-item-title">{{ item.tampNum }}℃</div>
  25.                         <div class="table-body-item-title">{{ item.eleNum }}A</div>
  26.                     </div>
  27.                 </div>
  28.             </div>
  29.         </div>
  30.     </div>
  31. </template>
  33. <script>
  34. export default {
  35.     name: 'ZuxiaTableScroll',
  36.     data() {
  37.         return {
  38.             // 调节滚动速率
  39.             time: 15,
  40.             successData: [
  41.                 { name: 'aaa嘿嘿和哈哈哈', status: 1, tampNum: 10, eleNum: 15 },
  42.                 { name: 'bbb', status: 1, tampNum: 10, eleNum: 15 },
  43.                 { name: 'ccc', status: 1, tampNum: 10, eleNum: 15 },
  44.                 { name: 'ddd', status: 1, tampNum: 10, eleNum: 15 },
  45.                 { name: 'eee', status: 1, tampNum: 10, eleNum: 15 },
  46.                 { name: 'fff', status: 1, tampNum: 10, eleNum: 15 },
  47.                 { name: 'ggg', status: 1, tampNum: 10, eleNum: 15 },
  48.                 { name: 'hhh', status: 1, tampNum: 10, eleNum: 15 },
  49.                 { name: 'iii', status: 1, tampNum: 10, eleNum: 15 },
  50.                 { name: 'jjj', status: 1, tampNum: 10, eleNum: 15 },
  51.                 { name: 'kkk', status: 1, tampNum: 10, eleNum: 15 },
  52.             ],
  53.         }
  54.     },
  55.     computed: {
  56.         errBgColor: function () {
  57.             return function (index) {
  58.                 if (index % 2 === 0) {
  59.                     return '#e8f7ff'
  60.                 } else {
  61.                     return '#ffffff'
  62.                 }
  63.             }
  64.         },
  65.         // successBgColor: function () {
  66.         //     return function (index) {
  67.         //         if (this.errData.length % 2 === 0) {
  68.         //             if (index % 2 === 0) {
  69.         //                 return '#e8f7ff'
  70.         //             } else {
  71.         //                 return '#ffffff'
  72.         //             }
  73.         //         } else {
  74.         //             if (index % 2 === 0) {
  75.         //                 return '#ffffff'
  76.         //             } else {
  77.         //                 return '#e8f7ff'
  78.         //             }
  79.         //         }
  80.         //     }
  81.         // },
  82.         // 滚动层高度
  83.         scrollWrapHeight: function () {
  84.             // left高度 - table-header高度 - table-bodyError高度 * 个数
  85.             return 600 - 52
  86.         },
  87.         // 滚动层份数，当内容溢出scrollWrapHeight，复制两份，添加滚动动画
  88.         // 否则就一份，不填加滚动动画
  89.         scrollNum: function () {
  90.             let successHeight = this.successData.length * 52
  91.             if (successHeight > this.scrollWrapHeight) {
  92.                 return 2
  93.             } else {
  94.                 return 1
  95.             }
  96.         },
  97.     },
  98. }
  99. </script>
  101. <style lang="scss" scoped>
  102. .left {
  103.     width: 520px;
  104.     height: 600px;
  105.     background-color: #fab4b4;
  106.     border-bottom: 1px solid red;
  107.     position: relative;
  109.     .table-header {
  110.         width: 100%;
  111.         background-color: skyblue;
  112.         color: #e1f3ff;
  113.         font-size: 16px;
  114.         font-weight: 700;
  115.         display: flex;
  117.         .table-header-item-title {
  118.             height: 52px;
  119.             width: 100%;
  120.             display: flex;
  121.             justify-content: center;
  122.             align-items: center;
  123.         }
  124.     }
  126.     .table-bodyError,
  127.     .table-bodySuccess {
  128.         width: 100%;
  129.         color: red;
  130.         font-size: 16px;
  131.         display: flex;
  133.         .table-body-item-title {
  134.             width: 100%;
  135.             height: 52px;
  136.             display: flex;
  137.             justify-content: center;
  138.             align-items: center;
  140.             .circle {
  141.                 width: 12px;
  142.                 height: 12px;
  143.                 background: #ea4141;
  144.                 border-radius: 50%;
  145.             }
  146.         }
  147.     }
  149.     .table-bodySuccess {
  150.         color: #000;
  152.         .table-body-item-title {
  153.             .circle {
  154.                 background: #29b153;
  155.             }
  156.         }
  157.     }
  159.     .scrollWrap::-webkit-scrollbar {
  160.         width: 0 !important;
  161.     }
  163.     .scroll {
  164.         animation: scrollData 10s infinite linear;
  165.     }
  167.     @keyframes scrollData {
  168.         from {
  169.             transform: translateY(0px);
  170.         }
  172.         to {
  173.             transform: translateY(-100%);
  174.         }
  175.     }
  176. }
  177. </style>

可以鼠标放上去停止滚动

  1. <template>
  2.     <div class="left">
  3.         <div class="table">
  4.             <div class="table-header">
  5.                 <div class="table-header-item-title">名称</div>
  6.                 <div class="table-header-item-title">状态</div>
  7.                 <div class="table-header-item-title">数据标题1</div>
  8.                 <div class="table-header-item-title">数据标题2</div>
  9.             </div>
  10.             <div     class="scrollWrap" :style="{
  11.                 height: scrollWrapHeight + 'px',
  12.                 overflowY: 'hidden',
  13.             }">
  14.                 <div ref="content" @mouseleave="toStartRun" @mouseenter="toPausedRun" :class="[scrollNum > 1 ? 'scroll' : '',animationPlayState]" :style="{
  15.                     animationDuration: time + 's',
  16.                 }" v-for="(a, index) in scrollNum" :key="index">
  17.                     <div class="table-bodySuccess" v-for="(item, index) in successData" :key="index">
  18.                         <div class="table-body-item-title">
  19.                             {{ item.name }}
  20.                         </div>
  21.                         <div class="table-body-item-title">
  22.                             <div class="circle"></div>
  23.                         </div>
  24.                         <div class="table-body-item-title">{{ item.tampNum }}℃</div>
  25.                         <div class="table-body-item-title">{{ item.eleNum }}A</div>
  26.                     </div>
  27.                 </div>
  28.             </div>
  29.         </div>
  30.     </div>
  31. </template>
  33. <script>
  34. export default {
  35.     name: 'ZuxiaTableScroll',
  36.     data() {
  37.         return {
  38.             animationPlayState:"animationPlayStateRun",
  39.             // 调节滚动速率
  40.             time: 15,
  41.             successData: [
  42.                 { name: 'aaa嘿嘿和哈哈哈', status: 1, tampNum: 10, eleNum: 15 },
  43.                 { name: 'bbb', status: 1, tampNum: 10, eleNum: 15 },
  44.                 { name: 'ccc', status: 1, tampNum: 10, eleNum: 15 },
  45.                 { name: 'ddd', status: 1, tampNum: 10, eleNum: 15 },
  46.                 { name: 'eee', status: 1, tampNum: 10, eleNum: 15 },
  47.                 { name: 'fff', status: 1, tampNum: 10, eleNum: 15 },
  48.                 { name: 'ggg', status: 1, tampNum: 10, eleNum: 15 },
  49.                 { name: 'hhh', status: 1, tampNum: 10, eleNum: 15 },
  50.                 { name: 'iii', status: 1, tampNum: 10, eleNum: 15 },
  51.                 { name: 'jjj', status: 1, tampNum: 10, eleNum: 15 },
  52.                 { name: 'kkk', status: 1, tampNum: 10, eleNum: 15 },
  53.             ],
  54.         }
  55.     },
  56.     computed: {
  57.         errBgColor: function () {
  58.             return function (index) {
  59.                 if (index % 2 === 0) {
  60.                     return '#e8f7ff'
  61.                 } else {
  62.                     return '#ffffff'
  63.                 }
  64.             }
  65.         },
  66.         // 滚动层高度
  67.         scrollWrapHeight: function () {
  68.             // left高度 - table-header高度 - table-bodyError高度 * 个数
  69.             return 600 - 52
  70.         },
  71.         // 滚动层份数，当内容溢出scrollWrapHeight，复制两份，添加滚动动画
  72.         // 否则就一份，不填加滚动动画
  73.         scrollNum: function () {
  74.             let successHeight = this.successData.length * 52
  75.             if (successHeight > this.scrollWrapHeight) {
  76.                 return 2
  77.             } else {
  78.                 return 1
  79.             }
  80.         },
  81.     },
  82.     methods: {
  83.         toPausedRun()
  84.         {
  85.            //alert(11)
  86.            //this.$refs.content.style.backgroundColor = 'red'
  87.            //this.$refs.content.style.animationPlayState="paused"
  88.            this.animationPlayState = "animationPlayStatePaused"
  89.         },
  90.         toStartRun()
  91.         {
  92.             this.animationPlayState = "animationPlayStateRun"
  93.             //alert(22)
  94.         }
  95.     }
  96. }
  97. </script>
  99. <style lang="scss" scoped>
  100. .left {
  101.     width: 520px;
  102.     height: 600px;
  103.     background-color: #fab4b4;
  104.     border-bottom: 1px solid red;
  105.     position: relative;
  107.     .table-header {
  108.         width: 100%;
  109.         background-color: skyblue;
  110.         color: #e1f3ff;
  111.         font-size: 16px;
  112.         font-weight: 700;
  113.         display: flex;
  115.         .table-header-item-title {
  116.             height: 52px;
  117.             width: 100%;
  118.             display: flex;
  119.             justify-content: center;
  120.             align-items: center;
  121.         }
  122.     }
  124.     .table-bodyError,
  125.     .table-bodySuccess {
  126.         width: 100%;
  127.         color: red;
  128.         font-size: 16px;
  129.         display: flex;
  131.         .table-body-item-title {
  132.             width: 100%;
  133.             height: 52px;
  134.             display: flex;
  135.             justify-content: center;
  136.             align-items: center;
  138.             .circle {
  139.                 width: 12px;
  140.                 height: 12px;
  141.                 background: #ea4141;
  142.                 border-radius: 50%;
  143.             }
  144.         }
  145.     }
  147.     .table-bodySuccess {
  148.         color: #000;
  150.         .table-body-item-title {
  151.             .circle {
  152.                 background: #29b153;
  153.             }
  154.         }
  155.     }
  157.     .scrollWrap::-webkit-scrollbar {
  158.         width: 0 !important;
  159.     }
  161.     .animationPlayStateRun
  162.     {
  163.         animation-play-state:running;
  164.     }
  166.     .animationPlayStatePaused
  167.     {
  168.         animation-play-state:paused;
  169.     }
  171.     .scroll {
  172.         animation: scrollData 10s infinite linear;   
  173.     }
  175.     @keyframes scrollData {
  176.         from {
  177.             transform: translateY(0px);
  178.         }
  180.         to {
  181.             transform: translateY(-100%);
  182.         }
  183.     }
  184. }
  185. </style>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue.js+Layer实现表格数据绑定与更新
一：使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去，在更新方法里边就可以直接...

vue.js 实现省市联动
HTML代码&lt;divid=&quot;pro_citys&quot;&gt; 省:&lt;selectid=&quot;provice&quot;v-on:change=&quot;prochange()&quo...

vue.js常见问题
一：花括号当做字符串显示的问题1：检查下绑定到vue.js的id是否重复，如果id重复了，就有可能存在这种问题，因为有可能把数...

vue.js常用指令
v-html可以把字符串当成一个html来渲染，而不是原样输出Html类似.net mvc中的@Html.Raw()方法&lt;divv-html=&quot;item.tit...

干货！div滚动到一定位置就固定他。vue中实现一侧滚动到底部就固定
尊重原创：转载请注名出处div滚动到一定位置就固定他，例如左边的内容很多，右边的内容很少，如果不处理滚动到一定位置后右...

vue.js常用指令，事件绑定等，vue过滤器解析状态过滤器多个参数。vue表格状态解析。vue解析类型，element ui解析类型，状态，el-tag
按照html的编码显示：v-html&lt;div class=&quot;font_info&quot; v-html=&quot;item.Content&quot;&gt;{{item.Content}}&l...

vue.js if用法
vue.js if可以做一些判断例如我们要把下面这个输出varvm=newVue({ el:&quot;#content&quot;, data:{ titles:[&quot;小明...

vue.js 学习日记第一章-安装vue开发环境
官网：https://cn.vuejs.org/v2/guide/ 这是一篇学习性文章，不定时更新，用来记录我学习vue.js的过程。 首先，是v...

vue.js 学习日记第二章-在vue中编写function及一些简单指令
官网：https://cn.vuejs.org/v2/guide/ vue.js 学习日记第一章：http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第三章-vue中的简单事件及事件修饰符
官网：https://cn.vuejs.org/v2/guide/ vue.js 学习日记第二章：http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第四章-vue中文本框数据获取与绑定及computed计算属性
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第三章： http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第五章-v-if和v-for指令的使用方式
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第四章： http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第六章-vue组件初步学习
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第五章： http://www.tnblog.net/18323015640/article/details/2...

vue.js学习日记第七章-搭建脚手架
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第六章： http://www.tnblog.net/18323015640/article/details/2...

vue实现好友选中效果
逛过vue官网肯定会发现一个有趣的指令“v-for”，相比与以前拼接html代码确实要上档次一点，而且减少了工作量，先看一波效...

js时间格式化vue.js时间格式化，带T 时间格式化

也可以借助moment库， 参考：https://www.tnblog.net/aojiancc2/article/details/8079moment库有点大，推荐可以使用day.js...