Vant轮播多个，实现一次轮播中展示多个div,此处以三个一屏为例

最新推荐文章于 2025-03-25 21:58:09 发布

Sheep_WuYang

最新推荐文章于 2025-03-25 21:58:09 发布

阅读量4.6k

点赞数 5

分类专栏： vant 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Sheep_WuYang/article/details/114363079

版权

vant 专栏收录该内容

1 篇文章

订阅专栏

实现效果如下：
最终展示效果

实现思路：
1、官方示例是循环列表，如下第一块代码块，从而实现每屏只有一张图片；
2、而需求是，希望每屏多张图片，或是多个div，所以意味着，每屏中不是单个，而是多个，考虑到用列表，用循环嵌套，相当于两层循环；
3、重点来了：所以我们需要给原始列表分组，例如原始数据为[1,2,3,4,5]，需要变成[[1,2,3],[4,5]],实现代码如下第二块代码块。

<van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" />
  </van-swipe-item>

// 给list分组
    groupList(list) {
      const arr = []
      for (var i = 0; i < list.length; i += 3) {
        arr.push(list.slice(i, i + 3))
      }
      return arr
    }

这里对于组件引用就赘述了，具体可参考Vant官方文档，对应的html需要改成如下,其中groups为groupList方法的处理结果

 <!--轮播图-->
  <div class="cont-lb">
    <van-swipe :autoplay="3000" :lazy-render="true">
      <van-swipe-item v-for="(itemlist, key) in groups" :key="key">
        <template v-for="(item, index) in itemlist">
          <div :key="index" class="img-class" @click="toXxx(item)">
            <span>{{ item.name}}</span>
            <img :src="item.img" alt>
          </div>
        </template>
      </van-swipe-item>
    </van-swipe>
  </div>

附样式修改代码如下：

.cont-lb{
    /deep/ .van-swipe__indicator {
      background: #bbc0c7;
    }
    /deep/.van-swipe__indicator--active {
      background: #58fa0b;
    }
  }
  
  .img-class {
    background: transparent;
    width: 30%;
    box-shadow: 0px 2px 12px rgba(100, 101, 102, 0.12);
    border-radius: 5px;
    border: 0.75px solid #EDEEEF;
    float: left;
    margin-left: 9px;
  }
  .img-class > span{
    position: absolute;
    margin-left: 10.5px;
    margin-top: 8.5px;
    font-size: 15px;
    font-weight: 600;
  }
  .img-class > img {
    width: 100%;
    height: 76px;
  }