<template>
<swiper
:effect="effect"
:grabCursor="grabCursor"
:modules="modules"
:autoplay="autoplay"
:loop="loop"
:class="clazz"
:pagination="pagination"
:navigation="navigation"
@touchmove="touchMove"
@swiper="onSwiper"
>
<swiper-slide
v-for="(item, index) in list"
:key="index"
>
<slot :item="item" name="img"></slot>
</swiper-slide>
</swiper>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
const emit = defineEmits(["click"]);
const props = defineProps({
effect: {
type: String,
default: "cards",
},
grabCursor: {
type: Boolean,
default: true,
},
modules: {
type: Array,
},
loop: {
type: Boolean,
default: true,
},
autoplay: {
type: Boolean,
default: true,
},
clazz: {
type: String,
default: "home-swiper",
},
list: {
type: Array,
},
native: {
type: Boolean,
default: false,
},
pagination: {
type: Boolean,
default: true,
},
navigation: {
type: Boolean,
default: false,
},
});
const click = (item) => {
emit("click", item);
};
const onSwiper = (swiper) => {
swiper.on('click', function(e) {
click(props.list[e.activeIndex]);
})
}
const touchMove = (e) => {
if (props.native) return;
let _activeDom = document.getElementsByClassName("swiper-slide-active")[0];
let _activeTransform = _activeDom.style.transform;
_activeTransform = _activeTransform.replace(
/rotateZ\(.*?\)/g,
"rotateZ(0deg)"
);
_activeDom.style.transform = _activeTransform;
let _nextDom = document.getElementsByClassName("swiper-slide-next")[0];
if (_nextDom) {
let _nextTransform = _nextDom.style.transform;
_nextTransform = _nextTransform.replace(/rotateZ\(.*?\)/g, "rotateZ(0deg)");
_nextDom.style.transform = _nextTransform;
}
let _prevDom = document.getElementsByClassName("swiper-slide-prev")[0];
if (_prevDom) {
let _prevTransform = _prevDom.style.transform;
_prevTransform = _prevTransform.replace(/rotateZ\(.*?\)/g, "rotateZ(0deg)");
_prevDom.style.transform = _prevTransform;
}
};
</script>
<style lang="scss" scoped>
.home-swiper {
margin-top: 20px;
width: calc(100% - 120px);
z-index: unset !important;
box-sizing: border-box;
//transform: scale(0.9);
}
.swiper-slide {
width: 100% !important;
}
::v-deep .swiper-slide-shadow {
background: unset !important;
}
.swiper-3d {
perspective: 2500px !important;
}
::v-deep .swiper-pagination-bullet-active {
background-color: #ffffff;
}
// 适配最新活动小米pad轮播图
@media screen and (min-width: 600px) and (max-width: 1200px) {
.home-swiper {
padding: 0 15px;
transform: scale(0.92);
height: 400px;
}
// 适配最新活动ios Ipad轮播图
@media screen and (min-width: 800px) and (max-width: 1200px) {
.home-swiper {
padding: 0 10px;
transform: scale(0.89);
height: 430px;
}
}
}
</style>
这是一段swiper的组件代码 有个问题
切换问题
当我切换tab回来时 组件就不执行了 比如划到了第一一页与第二页的中间 就会被测试提一个 样式的bug 那这种情况 有两个方法
一个是暴力执行 v-if 我采用的是v-if的route的name 这样的话 当name==当前页面时 组件就会重新执行 不会出现停止不动的现象 (不过这个也有个弊端 就比如你不管划到多少页 只要一回到这个页面 组件就会重新执行回到第一张图)若不想这样 尝试第二种方法
通过查询文档 发现有两个属性 :observer="true" :observeParents="true"
原因:如果swiper一开始处于display:none的情况下,后来display:block,那么swiper功能就会出现问题,比如分页器失效
开启监视器:当swiper样式改变的时候(例如隐藏显示),自动初始化swiper
• observer: true
• observeParents: true这就解决了切换问题