<template> <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp"> <ul class="item"> <li v-for="item in listData"> <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span> </li> </ul> </vue-seamless-scroll> </template> <script> import Vue from 'vue' import scroll from 'vue-seamless-scroll' Vue.use(scroll) export default { data () { return { listData: [{ 'title': '無縫滾動第一行無縫滾動第一行', 'date': '2017-12-16' }, { 'title': '無縫滾動第二行無縫滾動第二行', 'date': '2017-12-16' }, { 'title': '無縫滾動第三行無縫滾動第三行', 'date': '2017-12-16' }, { 'title': '無縫滾動第四行無縫滾動第四行', 'date': '2017-12-16' }, { 'title': '無縫滾動第五行無縫滾動第五行', 'date': '2017-12-16' }, { 'title': '無縫滾動第六行無縫滾動第六行', 'date': '2017-12-16' }, { 'title': '無縫滾動第七行無縫滾動第七行', 'date': '2017-12-16' }, { 'title': '無縫滾動第八行無縫滾動第八行', 'date': '2017-12-16' }, { 'title': '無縫滾動第九行無縫滾動第九行', 'date': '2017-12-16' }] } }, computed: { optionHover () { return { hoverStop: false, //是否懸停
singleHeight:26, // 單行停頓
waitTime:2500, //單行停頓時間
}
} } } </script> <style lang="scss" scoped> .seamless-warp { height: 229px; overflow: hidden; } ul li{ list-style-type:none; } </style>
效果如下: