vue有很多滚动插件，但是目前找不到通过修改数据实现滚动的插件，大部分的插件都是通过dom元素的滚动实现的，这种插件滚动起来更加平滑，但是有个问题：
如果要区别第一条数据，就需要通过对列表进行push操作了
注：单纯的滚动可以用vue-seamless-scroll插件
<template>
<div class="box">
<ul ref="container">
<li v-for="(item,index) in list" :key="item.id"> {{ item.text }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'ScrollList',
data() {
return {
list: [
{id: 1, text: '列表1'},
{id: 2, text: '列表2'},
{id: 3, text: '列表3'},
{id: 4, text: '列表4'},
{id: 5, text: '列表5'}
]
}
},
mounted() {
this.scrollList()
},
methods: {
scrollList() {
const oUl = this.$refs['container']
const oli = document.getElementsByTagName('li')
const maxL = oli[0].offsetHeight
let timer = 0
const moveLi = () => {
timer++
if (timer >= maxL) {
timer = 0
this.list.push(...this.list.splice(0, 1))
}
oUl.style.top = '-' + timer + 'px'
}
setInterval(moveLi, 30)
}
},
}
</script>
<style lang="less" scoped>
.box {
width: 100%;
height: 300px;
overflow: hidden;
ul {
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
width: 100%;
li {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 16px;
list-style: none;
}
}
}
</style>
