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