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.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 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. 结果

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

vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
Vue 表格循环滚动，鼠标移入暂停，移出继续滚动
简单例子: <template> 中的代码: <div id="chart"ref="chart"class="table-body ...
vue内容横向循环滚动_Vue替代marquee标签超出宽度文字横向滚动效果
一.npm 安装如果你想安装插件(自己写的) 安装 # install dependencies npm i marquee-components 使用在main.js引入 import marq ...
vue内容横向循环滚动_vue文字横向滚动公告
需求最新项目需要一个文字横向滚动效果, vue 文字横向无缝走马灯组件写的很详细,记录下来,广播出去. 解决方案 1. HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); 2 ...
vue内容横向循环滚动_在Vue中使用better-scroll实现横向滚动和竖向滚动
exportdefault{ name:"better_scroll", data() {return{ currentIndex:0, //当前显示的下标 listHeight: ...
vue列表，table表格自动滚动效果
vue列表,表格自动滚动安装依赖 npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-sea ...
vue实现循环滚动图片
这篇文章主要为大家详细介绍了vue实现循环滚动图片,多图片轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 <template><div class ...
vue实现循环滚动图片（多图片轮播）
效果(循环滚动,可切换方向): 轮播组件BaseSwiper.vue: <template><div class="swiperBox"><img ...
vue 左右循环滑动_vue实现循环滚动列表
本文实例为大家共享了vue实现循环滚动列表的详细代码,供大家参考,详细内容如下 1.安装 vue-seamless-scroll 实例文档链接 cnpm install vue-seamless- ...

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

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

1. 安装

2. 引入

3. 直接上代码

4. 结果

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

最新文章

热门文章