【Vue】vue如何做新闻列表上下滚动的效果

• Z时代
• 2024-01-10
• 分类：技术分享

循环播放的

这是data部分

data() {
return {
prizeList: [
{ name: 0 },
{ name: 1 },
{ name: 2 },
{ name: 3 },
{ name: 4 }
]
}
}

这是我目前的代码，只能循环切换，没有动画效果

setInterval(async () => {
let first = this.prizeList.splice(0, 1)
this.prizeList.push(...first)
}

回答

可以换一种思路，使用transition实现

<div class="scroll-wrap">
    <ul class="scroll-content" :style="{ top }">
        <li v-for="item in prizeList">{{item.name}}</li >  
    </ul>
</div>

export default {
  data () {
    return {
      prizeList: [
        { name: 0 },
        { name: 1 },
        { name: 2 },
        { name: 3 },
        { name: 4 }
      ],
      activeIndex: 0
    }
  },
  computed: {
    top() {
      return - this.activeIndex * 50 + 'px';
    }
  },
  mounted() {
    setInterval(_ => {
      if(this.activeIndex < this.prizeList.length) {
        this.activeIndex += 1;
      } else {
        this.activeIndex = 0;
      }
    }, 1000);
  }
};

.scroll-wrap{
  width: 200px;
  height: 50px;
  border: 1px solid blue;
  overflow: hidden;
}
.scroll-content{
  position: relative;
  transition: top 0.5s;
  li{
    line-height: 50px;
    text-align: center;
  }
}

效果

可以使用transition组件实现的

• vuejs.org/v2/guide/transitions.html" rel="nofollow noreferrer">vue官方文档

• 动画效果库

使用十分简单：

import 'animate'
<transition
  name="custom-classes-transition"
  enter-active-class="animated bounceIn" //animate 提供的动画效果
  leave-active-class="animated bounceOutRight"
>
... //要使用动画效果的内容
</transition>

VUE 滚动公共传送门

怎么循环呀

请问一下 箭头函数参数为_什么意思？

以上是 【Vue】vue如何做新闻列表上下滚动的效果 的全部内容， 来源链接： utcz.com/a/72028.html