< div>
< ul style = " list-style : none" >
< li class = " data-title" style = " width : 20%; " > 地区</ li>
< li class = " data-title" style = " width : 20%; " > 名称</ li>
< li class = " data-title" style = " width : 30%; " > 开始时间</ li>
< li class = " data-title" style = " width : 30%; " > 结束时间</ li>
</ ul>
< div v-for = " item in list[listIndex]" >
< ul style = " list-style : none" >
< li class = " data-info" style = " width : 20%; font-size : 16px; " >
{
{ item.area}}
</ li>
< li class = " data-info" style = " width : 20%; font-size : 16px; " >
{
{ item.name}}
</ li>
< li class = " data-info" style = " width : 30%; font-size : 16px; " >
{
{ item.startTime }}
</ li>
< li class = " data-info" style = " width : 30%; font-size : 16px; " >
{
{ item.endTime }}
</ li>
</ ul>
</ div>
</ div>
export default {
data ( ) {
return {
list : [ ] ,
listIndex : 0
} ,
} ,
created ( ) {
this . getData ( )
this . timer = setInterval ( this . changeDate, 5000 )
} ,
methods : {
getData ( ) {
axios. request ( {
method : 'post' ,
url : '/xxx/xxx/xxx' ,
data : {
}
} ) . then ( res => {
this . list = res. data. list
} )
} ,
changeDate ( ) {
this . listIndex= ( this . listIndex=== ( this . list. length - 1 ) ) ? 0 : ( me. listIndex+ 1 )
}
} ,
beforeDestroy ( ) {
clearInterval ( this . timer)
}
}
npm install vue- seamless- scroll -- save
import vueSeamlessScroll from 'vue-seamless-scroll'
Vue. component ( vueSeamlessScroll)
< div>
< div class = " box-style" >
< div class = " table-title" >
< span> ID</ span>
< span> 长</ span>
< span> 宽</ span>
< span> 高</ span>
< span> 时间</ span>
</ div>
< VueSeamlessScroll :class-option = " SeamlessScrollOption"
:data = " list" class = " table-list" >
< ul>
< li
v-for = " (item, index) in list" :key = " index"
:class = " { 'img-active': active === index }"
@click = " handleClick($event, item, index)"
>
< span v-text = " item.id" > </ span>
< span v-text = " item.length" > </ span>
< span v-text = " item.width" > </ span>
< span v-text = " item.height" > </ span>
< span v-text = " item.time" > </ span>
</ li>
</ ul>
</ VueSeamlessScroll>
</ div>
</ div>
export default {
data ( ) {
return {
list : [ ] ,
active : null ,
tableLiHeight : 60 ,
SeamlessScrollOption : {
singleHeight : this . tableLiHeight,
limitMoveNum : 1 ,
waitTime : 3000 ,
switchDelay : 400 ,
isSingleRemUnit : false ,
} ,
} ,
} ,
created ( ) {
this . getData ( )
} ,
methods : {
getData ( ) {
axios. request ( {
method : 'post' ,
url : '/xxx/xxx/xxx' ,
data : {
}
} ) . then ( res => {
this . list = res. data. list
} )
} ,
handleClick ( event, item, index ) {
this . active = index
}
} ,
}