https://chenxuan0000.github.io/vue-seamless-scroll/guide/
本地文档:地址1
import vueSeamlessScroll from 'vue-seamless-scroll/src';
export default {
name: "index",
components: {
vueSeamlessScroll
},
data(){
return:{
listData:[
{
title:'111',
date:'12211',
},
{
title:'111',
date:'12211',
},
{
title:'111',
date:'12211',
},
{
title:'111',
date:'12211',
},{
title:'111',
date:'12211',
},
{
title:'111',
date:'12211',
},
{
title:'111',
date:'12211',
},
{
title:'111',
date:'12211',
},
]
}
}
}
<div class="scroll-title" style="display: flex">
<div>排名</div>
<div>科室</div>
<div>人次</div>
<div>占比(%)</div>
</div>
<vue-seamless-scroll :data="listData" class="seamless-scrollwarp">
<ul class="item">
<li v-for="(item, index) in listData" :key="index">
<span class="title" v-text="item.title"></span>
<span class="date" v-text="item.date"></span>
<span class="date" v-text="item.date"></span>
<span class="date" v-text="item.date"></span>
</li>
</ul>
</vue-seamless-scroll>
.scroll-title{
display: flex;
&>div{
flex: 1;
text-align: center;
}
}
.seamless-scrollwarp {
height: 230px;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
li,
a {
height: 30px;
line-height: 30px;
display: flex;
justify-content: space-between;
font-size: 15px;
span{
flex: 1;
text-align: center;
}
}
}
}