<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>