vue 列表滚动的问题

Question

想vue里实现一个类似新闻列表的向上循环滚动效果，但是我这样写的当列表滚动到最上面以后就立即被拉下来了 不是那种首尾相连的循环滚动 请问这个代码该怎么改下呢 实在不知道怎么改了 改了好多都没实现

<ul :style="{ top }">

  <li v-for="item in noticesList">
          <a href="#">
              {{item.title}}
              <span class="fr">{{item.createTime}}</span>
          </a>
  </li>

</ul>

export default {

props: ['notices'],
  data() {
      return {
      activeIndex: 0
      }
  },
computed: {
  top() {
    return - this.activeIndex * 45 + 'px'
  },
  noticesList() {
    return this.notices.map( item => Object.assign(item, {
      createTime: formatDate(item.createTime, 0)
    }))
  }
},
mounted() {
  setInterval( () => {
    if(this.activeIndex < this.notices.length) {
      this.activeIndex += 1;
    } else {
       this.activeIndex = 0;
    }
  }, 2000)
 }

}

Answer 1

不太明白你为什么用这么复杂的方法 有一个css3插件叫animate里面有各种各样你想要的，当然如果你非要自己锻炼技术你可以参考一下我写的。。。小弟不才，不要见笑
html部分：
<div >

  <transition-group tag="ul"  name="uls">
      <li v-for="item,index in list" class="lis" :key="index" v-show="index===num">                   {{item.text}}</li>
  </transition-group>

</div>

JS部分：
export default {
data(){

return{
 num:0,
  list:[
    {text:111111111111111},
    {text:222222222222222},
    {text:333333333333333},
    {text:444444444444444},
    ]
}

},
created(){

this.playauto()       // 来一个钩子函数 执行这个函数

},
methods:{

play(){
    this.num++;
    if (this.num ===this.list.length){
      this.num = 0
    }
},
playauto(){
  setInterval(
    this.play,1000)
}

},

重点时CSS：
.uls-enter-active {
transform: translateY(0);
transition: all 0.3s ease;
}

.uls-leave-active {
transform: translateY(-100%);
transition: all 0.3s ease;
opacity: 1;
}

.uls-enter {
transform: translateY(100%);
opacity: 0;

}

.uls-leave {
transform: translateY(0);
opacity:0;

}

.lis{

width: 100px;
height: 20px;
line-height:20px;

}

Answer 2

export default {
props: ['notices'],
  data() {
      return {
      activeIndex: 0
      }
  },
computed: {
  top() {
    return - this.activeIndex * 45 + 'px'
  },
  noticesList() {
    const list = this.notices.map( item => Object.assign(item, {
      createTime: formatDate(item.createTime, 0)
    }))
    
    // 尾部多加一个元素
    return [...list, list[0]]
  }
},
mounted() {
  setInterval( () => {
    if(this.activeIndex < this.notices.length) {
      this.activeIndex += 1;
    } else {
       this.activeIndex += 1;
       
       // FIXME: 当动画结束后
       vm.on('transitionEnd',() => {
           // TODO: 这里不使用动画，把 top 归零
           this.activeIndex = 0
       })
    }
  }, 2000)
 }
}

emmmm.......思路大概是这样，跟做幻灯片差不多