vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)轮播表
研究了一个插件 列表自动滚动的插件vue-seamless-scroll。如图所示可以看到 它自动向上滚动 以及鼠标移动进入表格则停止滚动。感受这是个做大屏可视化时可靠帮手。/* 表格内背景颜色 */
研究了一个插件 列表自动滚动的插件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-seamless-scroll官网：vue-seamless-scroll
NPM
| 1 |
|
Yarn
| 1 |
|
PNPM
| 1 |
|
2. 引入组件注册
| 1 2 3 4 |
|
3. 使用
在实际项目中可能不止一个地方使用轮播表，所以我这里还是将其封装为单独一个组件可以复用，该组件默认都是宽高100% * 100%，给定一个容器引入即可。样式也是可以随意调整的，传入数据和配置项即可。具体配置项（class-option）看组件配置 | vue-seamless-scroll
组件封装
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>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)