无缝滚动

<template>
  <div class="box">
    <div class="scroll-wrap">
      <ul class="scroll-content" :style="style">
        <li v-for="item in prizeList">{{item.name}}</li >
      </ul>
    </div>
    <div class="button" @click="start">
      点我
    </div>
  </div>
</template>
<script>
  export default {
    name    : 'raffle',
    data() {
      return {
        prizeList: [
          { name: 0 },
          { name: 1 },
          { name: 2 },
          { name: 3 },
          { name: 4 }
        ],
        activeIndex: 0,
        speed:200,
        award:"",
        diff:15,
        time:null
      };
    },
    computed: {
      style() {
        return {
          'transform': `translateY(-${this.activeIndex*50}px)`
        }
      },
    },
    mounted() {
      this.prizeList.push({ name: 0 })

      setTimeout( () => {
        this.award = 3;
      }, 4000 );


    },
    methods : {
      start() {
        this.move()
      },
      move() {
        this.time = setTimeout(()=>{
          console.log('this.award',this.award)
          if(this.activeIndex < this.prizeList.length-1) {
            this.activeIndex += 1;
            console.log(this.activeIndex)
          } else {
            this.activeIndex = 0;
          }
          if ( this.award  && this.activeIndex === this.award) {
            this.speed += this.diff;
            clearTimeout(this.time)
            return
          }else {
            this.speed -= this.diff;
          }
          this.move()
        },this.speed)
      }
    }
  };
</script>

<style rel="stylesheet/less" lang="less">
  .scroll-wrap{
    width: 200px;
    height: 50px;
    border: 1px solid blue;
    overflow: hidden;
  }
  .button {
    width: 50px;
    height: 50px;
    background: red;
    margin: 10px;

  }

  .scroll-content{
    position: relative;
    transition-duration: 0.3s;



    li{
      line-height: 50px;
      height: 50px;
      text-align: center;
      background: red;
    }
  }
</style>
发布了74 篇原创文章 · 获赞 4 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览