页面:
<div v-if="nav3On == 3">
<div class="swiper-container" id="swiper7">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in partylist" :key="index">
{{ item.title }}
</div>
</div>
</div>
</div>
注:使用 Swiper 时,需确保 Swiper 容器的 display 属性不为 none ,同样 visibility 属性不为 hidden。
v-if 和 v-show 会影响 Swiper 的效果:
v-show :通过 CSS 的 display 属性来控制元素的显示和隐藏。当 v-show 的条件为 false 时,元素依然存在于 DOM 中,只是被设置为 display: none。
v-if :根据条件添加或移除元素。当 v-if 的条件为 false时,元素会从 DOM 中完全移除; v-if 的条件为 true 时,元素才会被添加到 DOM 中。因此需确保 Swiper 初始化是在元素渲染之后进行。
watch: {
// 使用 v-if 或 v-show 时,确保Swiper初始化是在元素渲染之后进行,即v-show/if条件为true
nav3On(newVal) {
if (newVal === 3) {
this.$nextTick(() => {
this.swiper7start();
});
}
}
},
mounted() {
// 使用 v-show 时,确保 Swiper 初始化在元素已经显示后执行,即 v-show 条件为 true
this.$nextTick(() => {
if (this.nav3On === 3) {
this.swiper7start();
}
});
},
方法:
methods: {
swiper7start(){
new Swiper("#swiper7", {
direction: "vertical", // 竖向轮播
speed: 1000,
loopAdditionalSlides: 2, // 使得循环时平滑过渡
autoplay: {
delay: 0, // 自动播放间隔时间为0,实现连续播放
disableOnInteraction: false, // 用户交互后不停止自动播放
},
loop: true,
slidesPerView: 9, // 一次播几个
spaceBetween: 0, // 轮播内容之间的间距
slidesPerGroup: 1, // 每次切换一个滑块
observer: true,
observeParents: true,
observeSlideChildren: true,
});
}
}
样式:
.swiper7 {
height: 100%
}
.swiper7 .swiper-slide{
height: 40px;
}
效果: