vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)
更新时间：2023年05月17日 10:33:51 作者：是小橙鸭丶
这篇文章主要介绍了vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue实现列表自动滚动、向上滚动的效果
研究了一个插件 列表自动滚动的插件vue-seamless-scroll
感受这是个做大屏可视化时可靠帮手
请欣赏一下效果图
如图所示可以看到 它自动向上滚动 以及鼠标移动进入表格则停止滚动
这个使用起来也是非常的方便的，接下来我为各位老铁记录一下使用的过程
1.第一步进行安装
npm install vue-seamless-scroll --save
2.在main.js直接导入使用
import scroll from 'vue-seamless-scroll' Vue.use(scroll)
3.建立了一个Test.vue来使用(结合element-ui中的表格来一起实现的)
<template>
<div id="app">
<div class="backround">
<div class="toptitle">
<div class="item">日期</div>
<div class="item">姓名</div>
<div class="item">地址</div>
</div>
<vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
<el-table
:data="listData"
border
:show-header="status"
>
<el-table-column
prop="date"
label="日期"
>
</el-table-column>
<el-table-column
prop="title"
label="姓名"
>
</el-table-column>
<el-table-column
prop="test"
label="地址"
>
</el-table-column>
</el-table>
</vue-seamless-scroll>
</div>
</div>
</template>
<script>
export default {
data () {
return {
status:false,
listData: [
{
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16',
'test':'测试',
'test2':'测试2',
'test3':'测试3'
},
{
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16',
'test':'测试',
'test2':'测试2',
'test3':'测试3'
},
{
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16',
'test':'测试',
'test2':'测试2',
'test3':'测试3'
},
{
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16',
'test':'测试',
'test2':'测试2',
'test3':'测试3'
},
{
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16',
'test':'测试',
'test2':'测试2',
'test3':'测试3'
},
{
'title': '无缝滚动第六行无缝滚动第六行',
'date': '2017-12-16',
'test':'测试',
'test2':'测试2',
'test3':'测试3'
},
{
'title': '无缝滚动第七行无缝滚动第七行',
'date': '2017-12-16',
'test':'测试',
'test2':'测试2',
'test3':'测试3'
},
]
}
},
computed: {
optionHover() {
return {
step: 0.5, // 数值越大速度滚动越快
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)
};
},
}
}
</script>4.若是不嫌弃小弟的样式丑可以在这里复制（各位大佬们也可以自己手写自己帅气的样式哟，背景图自己网上找一张即可）
<style lang="less" scoped>
.backround{
width: 100%;
height: 1000px;
background-image: url("../assets/pageBg.png");
}
/deep/ .el-table, /deep/ .el-table__expanded-cell{
background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
background-color: transparent;
color:white
}
.seamless-warp{
height: 200px;
overflow: hidden;
}
/deep/.el-table .cell{
text-align: center;
}
/deep/.toptitle{
width: 100%;
display: flex;
background-color: gainsboro;
margin-bottom: 10px;
border:2px solid gainsboro;
background-color: transparent;
color:white
}
.item{
width: 33.3%;
border-right:2px solid gainsboro;
text-align: center;
}
</style>重点：若是有不明白的小伙伴，以及想深入学习的小伙伴们 可以点击深入学习 进入到对应的插件演示文档进行学习呀
vue-seamless-scroll(一个简单的基于vue.js的无缝滚动)
一般在数据可视化项目中经常会看到无缝滚动的表格，即轮播表，我们可以使用 vue-seamless-scroll 来实现，使用起来也很方便
vue-seamless-scroll官网：vue-seamless-scroll
1. 安装
NPM
npm install vue-seamless-scroll --save
Yarn
yarn add vue-seamless-scroll
PNPM
pnpm add vue-seamless-scroll
2. 引入组件注册
import VueSeamlessScroll from "vue-seamless-scroll";
export default {
components: { VueSeamlessScroll }
}3. 使用
在实际项目中可能不止一个地方使用轮播表，所以我这里还是将其封装为单独一个组件可以复用，该组件默认都是宽高100% * 100%，给定一个容器引入即可。样式也是可以随意调整的，传入数据和配置项即可。具体配置项（class-option）看https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/properties.html#data
组件封装
src/components/VueSeamlessScroll/index.vue
<template>
<div class="vue-seamless-scroll">
<VueSeamlessScroll :data="listData" class="warp" :class-option="classOption">
<div class="row" v-for="item in listData" :key="item.id">
<div>{{ item.title }}</div>
<div>{{ item.date }}</div>
</div>
</VueSeamlessScroll>
</div>
</template>
<script>
import VueSeamlessScroll from "vue-seamless-scroll";
export default {
components: { VueSeamlessScroll },
props: {
listData: {
type: Array,
default: () => []
},
classOption: {
type: Object,
default: () => {}
}
}
};
</script>
<style scoped>
.vue-seamless-scroll {
width: 100%;
height: 100%;
padding: 12px 5px;
box-sizing: border-box;
}
.warp {
width: 100%;
height: 100%;
overflow: hidden;
}
.row {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
</style>组件引入使用
<template>
<div class="index">
<div class="scroll-table">
<!-- 轮播组件 -->
<VueSeamlessScroll :listData="listData" :classOption="{ step: 1, limitMoveNum: 5 }" />
</div>
</div>
</template>
<script>
import VueSeamlessScroll from '@/components/VueSeamlessScroll'
export default {
data() {
return {
listData: []
}
},
components: { VueSeamlessScroll },
mounted(){
this.getData()
},
methods:{
// 获取轮播数据
getData() {
setTimeout(() => {
this.listData = [
{
id: 1,
title: "无缝滚动第一行无缝滚动第一行",
date: "2017-12-16",
},
{
id: 2,
title: "无缝滚动第二行无缝滚动第二行",
date: "2017-12-16",
},
{
id: 3,
title: "无缝滚动第三行无缝滚动第三行",
date: "2017-12-16",
},
{
id: 4,
title: "无缝滚动第四行无缝滚动第四行",
date: "2017-12-16",
},
{
id: 5,
title: "无缝滚动第五行无缝滚动第五行",
date: "2017-12-16",
},
{
id: 6,
title: "无缝滚动第六行无缝滚动第六行",
date: "2017-12-16",
},
{
id: 7,
title: "无缝滚动第七行无缝滚动第七行",
date: "2017-12-16",
},
{
id: 8,
title: "无缝滚动第八行无缝滚动第八行",
date: "2017-12-16",
},
{
id: 9,
title: "无缝滚动第九行无缝滚动第九行",
date: "2017-12-16",
},
{
id: 10,
title: "无缝滚动第十行无缝滚动第十行",
date: "2017-12-16",
},
];
}, 200);
},
},
}
</script>
<style scoped>
.index {
width: 100%;
height: 100%;
padding: 20px 0 0 20px;
box-sizing: border-box;
}
.scroll-table {
width: 350px;
height: 300px;
border: 1px dashed red;
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解Vuex管理登录状态,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
今天小编就为大家分享一篇vue: WebStorm设置快速编译运行的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了vue工程全局设置ajax的等待动效的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了vue $nextTick实现原理深入详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了在Vue中使用HOC模式的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要介绍了ant-design-vue按需加载的坑的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
上一篇我们安装了vue-cli，接下来我们就使用该脚手架进行创建项目，这篇文章主要介绍了vue-cli创建项目以及项目结构的相关资料,需要的朋友可以参考下面文章的具体内容2021-10-10
vue中关于element的el-image 图片预览功能增加一个下载按钮(操作方法)
这篇文章主要介绍了vue中关于element的el-image 图片预览功能增加一个下载按钮,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue+iview/elementUi实现城市多选，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了vue中v-bind:style效果的自定义指令，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
最新评论