微信小程序类似中奖用户的展示，抽奖，循环向上滚动无缝衔接的效果

大大散户

已于 2024-08-17 23:01:52 修改

阅读量390

点赞数 1

文章标签：微信小程序 notepad++ 小程序

于 2024-08-16 17:42:27 首次发布

本文链接：https://blog.csdn.net/qq_45399948/article/details/141265745

版权

<!-- /向上滚动 -->
<view class="lucky">
  <view style="height: 26rpx;"></view>
  <view class="lucky-top">已参与用户</view>
  <view class="lucky-swiper">
    <view class="lucky-position" style="top:-{{move}}px;" id="lucky-curin">
      <view class="lucky-for" wx:for="{{detail}}" wx:key="index" data-index="{{index}}">
        <view style="width: 100%;display: flex;">
          <view style="width: 100%;height: 120rpx;" wx:for="{{item.son}}" wx:key="index">
            <image src="{{item.img}}" style="width: 60rpx;height: 60rpx;margin-left: 30rpx;" mode="" />
            <view style="height: 40rpx;width: 100%;text-align: center;">{{item.name}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

  wuxian() {
    // *************无线表格

    wirel = setInterval(function () {
      // console.log("move", that.data.move);
      that.setData({
        move: that.data.move + 1,
      })
    }, 20)
    king = setInterval(function () {
      let detail = []
      for (let i = 1; i < that.data.detail.length; i++) {
        detail.push(that.data.detail[i])
      }
      detail.push(that.data.detail[0])
      that.setData({
        detail: detail,
        move: 0,
      })
    }, 1190);
    // ************ 50 2860    50 6000    20 1200标准版
  },

测试数据数组：

 move: 0,   
 detail: [{
        son: [{
            name: "王*蓝",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "李*尔",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "大*头",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "覃*飞",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "义*棋",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "芬*子",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
        ],
      },
      // 2
      {
        son: [{
            name: "蒋*生",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "黄*宇",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "大*游",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "梦*雨",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "寒*珀",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "li*d",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
        ],
      },
      // 2
      {
        son: [{
            name: "小*天",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "陈*梦",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "达*内",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "lv*d",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "兴*业",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "大*型",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
        ],
      },
      // 2
      {
        son: [{
            name: "刘*珍",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "黄*猛",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "li*d",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "ha*d",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "po*d",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "ql*d",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
        ],
      },
      // 2
      {
        son: [{
            name: "p*-",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "k*p",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "飞*龙",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "乌*龙",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "飞*天",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
          {
            name: "茅*台",
            img: "https://img0.baidu.com/it/u=3920778814,1443331810&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=1616ddbea417e11bb89e37b9b11aa118",
          },
        ],
      },
    ],