vue swiper根据字段判断是否单页显示(h5)

html:

          <van-swipe
            class="my-swipe"
            v-if="lotteryVOList && lotteryVOList.length"
          >
            <van-swipe-item
              v-for="(item, index) in lotteryVOList"
              :autoplay="3000"
              :key="index"
            >
              <ul class="prize-list">
                <li class="prize-item" v-for="(inner, ind) in item" :key="ind">
                  <div class="prize-name text-ovflow">
                    {{ inner.lotteryName || "" }}
                  </div>
                  <div class="gift-img">
                    <img
                      :src="inner.lotteryPic"
                      alt="奖品图片"
                      @click="handlePreview(inner.lotteryPic)"
                    />
                  </div>
                  <div class="gift-name text-ovflow">
                    {{ inner.lotteryGoodName || "" }}
                  </div>
                  <div class="gift-num text-ovflow">
                    数量：{{ inner.lotteryNum || "" }}
                  </div>
                </li>
              </ul>
            </van-swipe-item>
          </van-swipe>

css:

        .my-swipe {
          position: relative;
          padding-bottom: 5rem;
          .prize-list {
            display: flex;
            justify-content: space-around;
            .prize-item {
              display: flex;
              flex-direction: column;
              justify-content: center;
              text-align: center;
              width: 8.5rem;
              .prize-name {
                width: 100%;
                font-size: 1.6rem;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #e9d9b9;
                padding-bottom: 1.6rem;
              }
              .gift-img {
                width: 8.5rem;
                height: 8.5rem;
                background: linear-gradient(180deg, #ecdfc0 0%, #c68f5e 100%);
                border-radius: 1.6rem;
                padding: 1rem;
                overflow: hidden;
                box-sizing: border-box;
                img {
                  width: 100%;
                  height: 100%;
                  display: block;
                  object-fit: cover;
                  border-radius: 5px;
                }
              }
              .gift-name {
                width: 100%;
                font-size: 1.4rem;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #e9d9b9;
                padding: 1.2rem 0 1rem;
              }
              .gift-num {
                width: 100%;
                font-size: 1.2rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #e9d9b9;
              }
            }
          }
        }

 

js:

methos方法

getLotteryDetail() {           
 var lotteryVOList = [
 {
        "lotteryId": "2269194070464503832",
        "lotteryName": "一等奖",
        "lotteryPic": "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/492beeb0fee64b4389126362055559b1.jpg",
        "lotteryStatus": 1,
        "lotteryNum": 10,
        "residueLotteryNum": 6,
        "lotteryGoodName": "苹果12",
        "defaultStartNum": 2,
        "topicType": 1,
        "isSinglePage": false
      },
      {
        "lotteryId": "2269194070464503833",
        "lotteryName": "二等奖",
        "lotteryPic": "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/f2ddc58fd45e4142991da8bb93a05750.png",
        "lotteryStatus": 0,
        "lotteryNum": 10,
        "residueLotteryNum": 10,
        "lotteryGoodName": "苹果11",
        "defaultStartNum": 1,
        "topicType": 1,
        "isSinglePage": false
      },
      {
        "lotteryId": "2270615446941474842",
        "lotteryName": "是",
        "lotteryPic": "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/f2ddc58fd45e4142991da8bb93a05750.png",
        "lotteryStatus": 1,
        "lotteryNum": 1,
        "residueLotteryNum": 0,
        "lotteryGoodName": "是",
        "defaultStartNum": 1,
        "topicType": 1,
        "isSinglePage": false
      },
      {
        "lotteryId": "2269194070464503834",
        "lotteryName": "三等奖",
        "lotteryPic": "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/f2ddc58fd45e4142991da8bb93a05750.png",
        "lotteryStatus": 0,
        "lotteryNum": 10,
        "residueLotteryNum": 10,
        "lotteryGoodName": "苹果XS",
        "defaultStartNum": 1,
        "topicType": 1,
        "isSinglePage": false
      },
      {
        "lotteryId": "2269194070464503835",
        "lotteryName": "四等奖",
        "lotteryPic": "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/f2ddc58fd45e4142991da8bb93a05750.png",
        "lotteryStatus": 0,
        "lotteryNum": 10,
        "residueLotteryNum": 10,
        "lotteryGoodName": "苹果8",
        "defaultStartNum": 3,
        "topicType": 1,
        "isSinglePage": false
      },
      {
        "lotteryId": "2269194070464503836",
        "lotteryName": "特等奖",
        "lotteryPic": "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/f2ddc58fd45e4142991da8bb93a05750.png",
        "lotteryStatus": 1,
        "lotteryNum": 3,
        "residueLotteryNum": 0,
        "lotteryGoodName": "现金8888",
        "defaultStartNum": 1,
        "topicType": 1,
        "isSinglePage": false
      },
      {
        "lotteryId": "2269194070464503837",
        "lotteryName": "安慰奖安慰奖安慰奖安慰奖安慰奖安慰奖",
        "lotteryPic": "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/f2ddc58fd45e4142991da8bb93a05750.png",
        "lotteryStatus": 1,
        "lotteryNum": 20,
        "residueLotteryNum": 2,
        "lotteryGoodName": "现金88",
        "defaultStartNum": 6,
        "topicType": 1,
        "isSinglePage": false
      },
      {
        "lotteryId": "2476625735144710144",
        "lotteryName": "五等奖",
        "lotteryPic": "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/492beeb0fee64b4389126362055559b1.jpg",
        "lotteryStatus": 0,
        "lotteryNum": 10,
        "residueLotteryNum": 10,
        "lotteryGoodName": "苹果13",
        "defaultStartNum": 2,
        "topicType": 1,
        "isSinglePage": true
      },
      {
        "lotteryId": "2476784356876894216",
        "lotteryName": "123",
        "lotteryPic": "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/f2ddc58fd45e4142991da8bb93a05750.png",
        "lotteryStatus": 0,
        "lotteryNum": 1,
        "residueLotteryNum": 1,
        "lotteryGoodName": "435",
        "defaultStartNum": 1,
        "topicType": 1,
        "isSinglePage": false
      },
      {
        "lotteryId": "2475360025462276126",
        "lotteryName": "沙发",
        "lotteryPic": "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/d0b40933f103498e86bd54d12d872578.jpg",
        "lotteryStatus": 0,
        "lotteryNum": 1,
        "residueLotteryNum": 1,
        "lotteryGoodName": "沙发",
        "defaultStartNum": 1,
        "topicType": 2,
        "isSinglePage": false
      },
      {
        "lotteryId": "2475547938871484416",
        "lotteryName": "发",
        "lotteryPic": "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/f2ddc58fd45e4142991da8bb93a05750.png",
        "lotteryStatus": 0,
        "lotteryNum": 1,
        "residueLotteryNum": 1,
        "lotteryGoodName": "沙发",
        "defaultStartNum": 1,
        "topicType": 1,
        "isSinglePage": false
      },
      {
        "lotteryId": "2476784356876894218",
        "lotteryName": "吃",
        "lotteryPic": "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/f2ddc58fd45e4142991da8bb93a05750.png",
        "lotteryStatus": 0,
        "lotteryNum": 2,
        "residueLotteryNum": 2,
        "lotteryGoodName": "吃",
        "defaultStartNum": 1,
        "topicType": 1,
        "isSinglePage": false
      },
      {
        "lotteryId": "2475360025462276124",
        "lotteryName": "安抚",
        "lotteryPic": "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/f2ddc58fd45e4142991da8bb93a05750.png",
        "lotteryStatus": 0,
        "lotteryNum": 1,
        "residueLotteryNum": 1,
        "lotteryGoodName": "沙发",
        "defaultStartNum": 1,
        "topicType": 1,
        "isSinglePage": false
      }];
            this.lotteryVOList = [];
            let sort = [];
            lotteryVOList.forEach((item, index) => {
              //true情况
              if (item.isSinglePage) {
                let newArr = [];
                newArr.push(item);
                sort.push(newArr);
              } else {
                //判断 sort最后一项长度是否为3   当前项的前一项的isSinglePage 是否为false
                if (
                  sort.length > 0 &&
                  sort[sort.length - 1].length != 3 &&
                  lotteryVOList[index - 1].isSinglePage == false
                ) {
                  sort[sort.length - 1].push(item);
                } else {
                  console.log(11);
                  let newArr = [];
                  newArr.push(item);
                  sort.push(newArr);
                }
              }
              if (index === lotteryVOList.length - 1) {
                this.lotteryVOList = sort;
              }
            });
}

 created() 生命周期调用getLotteryDetail方法

 this.getLotteryDetail();