vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用

简介: vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用


1. 安装

npm install vue-seamless-scroll --save

2. 引入

在main.js引入使用vue-seamless-scroll

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

插件在线演示文档

3. 直接上代码

<template>
  <div class="" style="width: 500px;height: 500px">
    <!-- 表头 -->
    <div class="warp-title" style="height: 25px;background-color: #f5f7fa;">
      <ul class="item">
        <li>
          <span class="title" style="width: 150px">标题</span>
          <span class="date" style="width: 150px">时间</span>
        </li>
      </ul>
    </div>
    <!-- 表格滚动区 -->
    <div>
      <vue-seamless-scroll :style="{height: this.scrollHeight + 'px' }" :data="listData"
                           :class-option="defaultOption" class="warp-content">
        <ul class="item">
          <li v-for="(item, index) in listData"
              :style="{backgroundColor:((index+1)%2 == 0) ? '#f0f9eb' : '#ffffff'}">
            <span class="title" style="width: 150px" v-text="item.title"></span>
            <span class="date" style="width: 150px" v-text="item.date"></span>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      // 这里存放数据
      return {
        scrollHeight:250,
        listData: [{
          'title': '第一行',
          'date': '2017-12-16'
        }, {
          'title': '第二行',
          'date': '2017-12-16'
        }, {
          'title': '第三行',
          'date': '2017-12-16'
        }, {
          'title': '第四行',
          'date': '2017-12-16'
        }, {
          'title': '第五行',
          'date': '2017-12-16'
        }, {
          'title': '第六行',
          'date': '2017-12-16'
        }, {
          'title': '第七行',
          'date': '2017-12-16'
        }, {
          'title': '第八行',
          'date': '2017-12-16'
        }]
      }
    },
    // 监听属性 类似于data概念
    computed: {
      defaultOption () {
        return {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      }
    },
    // 方法集合
    methods: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成(可以访问当前this实例)
    created() {},
    // 生命周期 - 挂载完成(可以访问DOM元素)
    mounted() {}
  }
</script>
<style lang="less" scoped>
  .warp-title {
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
    }
    li {
      height: 20px;
      line-height: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
    }
  }
  .warp-content {
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
    }
    li {
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
  }
</style>

4. 结果

相关文章
|
6天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
5天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
5天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
20天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
6天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
6天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
6天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
7天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
7天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
12天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发