搜索

首页  >  问答  >  正文

javascript - vue如何做新闻列表上下滚动的效果

循环播放的

这是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)
}
淡淡烟草味淡淡烟草味2735 天前839

全部回复(3)我来回复

  • 世界只因有你

    世界只因有你2017-05-19 10:45:20

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

    <p class="scroll-wrap">
        <ul class="scroll-content" :style="{ top }">
            <li v-for="item in prizeList">{{item.name}}</li >  
        </ul>
    </p>
    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;
      }
    }

    效果

    回复
    0
  • 巴扎黑

    巴扎黑2017-05-19 10:45:20

    可以使用transition组件实现的

    回复
    0
  • 怪我咯

    怪我咯2017-05-19 10:45:20

    • vue官方文档

    • 动画效果库

    使用十分简单:

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

    回复
    0
  • 取消回复