解决vant中轮播图的图片大小不一致问题

因为最近在做的项目用到了vant，正好也用到了轮播图这个插件，因为图片大小不知道怎么调也卡了好久，把我怎么解决的方法写出来，供后面的小伙伴参考下~

我的：

编译器：vscode
使用的vue/cli版本为4.5.4

这里给出vant的官方网站以供参考：vant官网
在vant的轮播图组件Swipe中官网给的代码是这样的：
（这里以基础用法为例）

<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>

<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>

其中，van-swipe标签部分，是要写在你要加入的页面的template标签中的，为了方便样式的添加，我给它加了div，并给div标签加了class，而且因为我只想插两张图片，故删除了多余的van-swipe-item，只留下了两个，并在中间加入了img标签添加我要加入的图片。
代码如下：

<div class="Mine-categories-swipe">
            <van-swipe class="my-swipe" :autoplay="4000" indicator-color="white">
                <van-swipe-item>
                    <img src="../../build/meituan1.jpg" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="../../build/meituan2.jpg" alt="">
                </van-swipe-item>
            </van-swipe>
</div>

这里的autoplay我改为了4000，是因为我想让图片四秒换一次。
官方给的样式我用了，但也做了部分修改：（添加了高度和宽度）

注意：这里的高度和宽度需与图片设置的高宽相同，否则背景颜色会露出来。

.my-swipe .van-swipe-item {
    width: 100%;
    height: 100px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    background-color: #39a9ed;
  }

然后在这个样式.my-swipe .van-swipe-item的前面我们来设置图片的大小，其实很简单，我们前面不是加了一个div和它的class吗，这里就用上啦：

.Mine-categories-swipe img{
    display: inline-block;
    width: 100%;
    height: 100px;
}

我起的div的class为Mine-categories-swipe，因为想要图片样式统一，故在后面加上img，代表Mine-categories-list下的所有img标签的样式。
最后给大家康康效果（emmmm…有些丑，凑活着看吧,你可以再调它的高度来让图片更好看些，宽度就100%不用变了）
在这里插入图片描述

参考博客：https://blog.csdn.net/illusion_melody/article/details/80651019

解决vant中轮播图的图片大小不一致问题

猜你喜欢