记录一下最近工作中遇到的问题,需求是在列表里面再加入一个swiper去实现拖动效果,一开始想着很简单,就再v-for循环的时候拿item里面的数组再去swiper里面循环就可以了,就像这样
<div class="listBox" v-for="(item,i) in serveList" :key="item.id">
<div class="list-item" ><i class="icon"></i><div class="list-item-test" :title="item.name">{{ item.name }}</div></div>
<div class="list-item-right">
<div class="swiper" ref="mysiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(child,index) in item.strategyDevVOS" :key="child.id">
</div>
</div>
</div>
</div>
</div>
new Swiper('.swiper', {
slidesPerView: 8,
loop: false,
slidesPerView: 'auto',
spaceBetween: 0,
paginationClickable: true,
observer:true,
observeParents:false,//修改swiper的父元素时,自动初始化swiper
// 如果需要分页器
// pagination: ".swiper-pagination",
// 如果需要前进后退按钮
// nextButton: ".swiper-button-next",
// prevButton: ".swiper-button-prev",
// 如果需要滚动条
// scrollbar: '.swiper-scrollbar',
//如果需要自动切换海报
// autoplay: 1000, //自动修改延迟的时间
// autoplayStopOnLast: true,
});
但是,这样写呢页面没有报错,也正常渲染出来了,但是不能左右拖动,打开f12发现.swiper的div是没有正常渲染的,这就跟需求就不一样了,后面单独把swiper拿出来,就可以正常的拖动,但是放入到循环里面就不行了,想了一下觉得应该是swiper只注册了一次,没有注册多次造成的 就修改了一下代码如下
<div class="listBox" v-for="(item,i) in serveList" :key="item.id">
<div class="list-item" @click="toBusiness(item)"><i class="icon"></i><div class="list-item-test" :title="item.name">{{ item.name }}</div></div>
<div class="list-item-right">
<div :id="`swiper${i}`" ref="mysiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(child,index) in item.strategyDevVOS" :key="child.id">
</div>
</div>
</div>
</div>
</div>
for(var i = 0; i< this.serveList.length;i++){
new Swiper(`#swiper${i}`, {
slidesPerView: 8,
loop: false,
slidesPerView: 'auto',
spaceBetween: 0,
paginationClickable: true,
observer:true,
observeParents:false,//修改swiper的父元素时,自动初始化swiper
// 如果需要分页器
// pagination: ".swiper-pagination",
// 如果需要前进后退按钮
// nextButton: ".swiper-button-next",
// prevButton: ".swiper-button-prev",
// 如果需要滚动条
// scrollbar: '.swiper-scrollbar',
//如果需要自动切换海报
// autoplay: 1000, //自动修改延迟的时间
// autoplayStopOnLast: true,
});
}
动态去添加id,然后循环注册的时候动态获取到id,从而让每次循环出来的swiper都是唯一的,然后再打开页面,swiper就正常可以拖动了。
另外在记录一个工作中发现的问题:css里面 opacity会影响到z-index的层级,如果要使用z-index去设置层级的话不要使用opacity去控制透明度!!!!