小程序实现中奖动态定时滚动效果

方法：使用小程序swiper组件，设置内容自动滚动：autoplay=‘true’, 内容滚动无缝衔接：circular=“true”, 然后再设置滚动时长：interval=“3000”， 最最主要的是设置同时显示多少个item：display-multiple-items=“4”

<div class="award-back">
      <div class="award-title">中奖动态</div>
      <swiper
        class="prize-list"
        autoplay="true"
        vertical="true"
        circular="true"
        interval="3000"
        display-multiple-items="4"
        v-if="winList.length > 4"
      >
        <swiper-item  catchtouchmove="return" class="prize-item" v-for="(item, index1) in winList" :key="index1">
          <span class="list-name">{{item.nickName}} </span>
          <span class="list-reward">{{item.awardName}} </span>
        </swiper-item>
      </swiper>
    </div>

.award-back{
      width: 100%;
      height: 300px;
      background-color: rosybrown;
      .award-title{
        width: 100%;
        text-align: center;
        line-height: 60px;
      }
    }
    .prize-list{
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      .prize-item{
        @include flex;
        @include space-between;
        font-size: 15px;
        color: #fff;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #bcac97;
      }

winList: [
          {
            nickName: '小明',
            awardName: '10元现金红包'
          },
          {
            nickName: '小红',
            awardName: 'iPhoneXR实物奖'
          },
          {
            nickName: '小李',
            awardName: '澳洲10日游'
          },
          {
            nickName: '小张',
            awardName: '5元随机红包'
          },
          {
            nickName: '小其',
            awardName: '小件玩偶一个'
          },
          {
            nickName: '小江',
            awardName: '豪礼空调一台'
          }
        ],

之前想到过使用动画来实现滚动，但是难以实现无缝衔接，小程序已经为我们提供了这么好的组件，为何不用，何必花大力气去写那么多动画。

这是之前不成熟的方法：

<div class="prize-list"  v-if="winList.length > 4">
	 <div class="prize-item" v-for="(item, index1) in winList"
                 :key="index1"
                 :style="{transform: 'translateY('+transY+'rpx)'}">
         <span class="list-name">{{item.nickName}} </span>
         <span class="list-reward">{{item.awardName}} </span>
    </div>
</div>

 move () {
        this.len = this.winList.length
        let { len, transY, speedMove } = this
        const totalHeight = 81 * (len - 3)
        this.timerMove = setInterval(() => {
          transY -= speedMove
          if (Math.abs(transY) > totalHeight) {
            transY = 0
          }
          this.transY = transY
        }, 4000)
      },