因为最近在做的项目用到了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