li ul vue 滚动显示_vue ul循环滚动的问题

图片描述

想实现首尾相连的滚动效果 滚动是可以 但是不是循环的 滚动到最后一个之后 整个列表又被拉下来了， 要怎样才能实现这种循环连续滚动呢 代码改了无数次 搞了好多天了 还是没弄好 太愁人了 大家指点指点迷津 实在弄不好了

我的代码

网站公告

• :class="{'prev':prevIndex===index,'current':currentIndex===index||index===currentIndex-1}">

  :to="{path:'/information/notice/noticeDetail',query:{id: item.id}}">

  {{item.title}}

  {{item.createTime}}

更多公告

import { formatDate } from 'tools/dateUtil'

export default {

props: ['notices'],

data() {

return {

activeIndex: 0,

prevIndex: -1,

currentIndex: 0

}

},

mounted() {

setInterval( () => {

if(this.currentIndex < this.notices.length) {

//this.currentIndex += 1;

} else {

}

}, 2000)

},

computed: {

top() {

return - this.activeIndex * 45 + 'px'

},

noticesList() {

return this.notices.map( item => Object.assign(item, {

createTime: formatDate(item.createTime, 0)

}))

}

}

}

@import '~assets/less/index.less';

.scroll {

height: 45px;

line-height: 45px;

border: 1px solid #e6e6e6;

overflow: hidden;

.scroll-wrapper{

width: @pages-width;

margin: 0 auto;

.scroll-lt {

position: relative;

.fl(left);

& > p {

.fl(left);

height: 47px;

line-height: 47px;

box-sizing: border-box;

& > i {

display: inline-block;

vertical-align: middle;

width: 21px;

height: 23px;

background: url(../../../assets/images/index.png) -373px -262px no-repeat;

& + a {

font-size: 16px;

color: @french-grey;

padding: 2px 20px;

border-right: 2px solid #ddd;

}

}

}

& > ul {

.fr(right);

padding-left: 15px;

height: 45px;

//overflow: hidden;

position: relative;

//transition: top 0.5s;

li {

transition:all 0.2s;

width: 910px;

font-size: 14px;

position: absolute;

top: -45px;

&.current {

top: 0;

}

&.prev.current {

top: -45px;

}

& > a {

color: @black-color;

& > span {

.fr(right);

}

}

}

}

}

.scroll-rt {

.fr(right);

}

}

}

img/bVXHVu