页面中有两个swiper,每个swiper都需要用到分页器,刚开始我是这样写的
var vipSwiper = new Swiper ('.vip .swiper-container', {
pagination: {
el: '.vip .swiper-pagination',
clickable :true,
}
})
var shopSwiper = new Swiper ('.shop .swiper-container', {
pagination: {
el: '.shop .swiper-pagination',
clickable :true,
}
})
但是第二个swiper分页器死活出不来,经过各种调试,网上找了一些资料,发现应该对两个swiper-pagination分别定义各自的类
<div class="main-vip" >
<div class="swiper-container vip">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
</div>
<div class="swiper-pagination vip-page"></div>
</div>
</div>
<div class="main-shop">
<div class="swiper-container shop">
<div class="swiper-wrapper">
<div class="swiper-slide">></div>
</div>
<div class="swiper-pagination shop-page"></div>
</div>
</div>
var vipSwiper = new Swiper ('.vip', {
pagination: {
el: '.vip-page',
clickable :true,
}
})
var shopSwiper = new Swiper ('.shop', {
pagination: {
el: '.shop-page',
clickable :true,
}
})
这样就可以了,惨痛的教训