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

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

      
中奖动态
      
        
          {{item.nickName}} 
          {{item.awardName}} 
        
      
    

.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: '豪礼空调一台'
          }
        ],

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

这是之前不成熟的方法：

	 

         {{item.nickName}} 
         {{item.awardName}} 
    


 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)
      },