动态加载的数据,静态数据是20个slide 能对整齐。动态加载的数据只有15个却不能对齐
var mySwiper = new this.$Swiper(".swiper-container2", {
slidesPerView: 5, //一行显示5个
slidesPerColumn: 2, //显示2行
slidesPerGroup: 5, //每次滑动滚动的数量
scrollbar: {
el: "#sw2",
dragSize: 53
},
draggable: false,
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: false,
});
mySwiper.scrollbar.$el.css("height", "15px");
mySwiper.scrollbar.$dragEl.css("background", "#F2414C");
mySwiper.scrollbar.$el.css("width", "157px");
mySwiper.scrollbar.updateSize();
//结构
<div class="swiper-container2">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="item in goodslist"
:key="item.id"
@click="toNew(item.id)"
>
<div class="box">
<img :src="item.src" alt="这是图" />
</div>
<span>{{ item.name }}</span>
</div>
</div>
<br />
<div class="swiper-scrollbar" id="sw2"></div>
</div>