极客观点
项目管理
HarmonyOS
根据vue-awesome-swiper官网例子写的一个可以缩放的dome 轮播图，可以正常轮播，
vue2
"swiper": "^6.8.4",
"vue-awesome-swiper": "^4.1.1",
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css'; // 引入 Swiper 样式引用是正确的
现在有个问题
页面有多张图片，当我点击某张图片时能获取到其下标initialIndex，我预期是点击某张图片弹层中显示某张图片，
swiperOption: {
initialSlide: this.initialIndex,
},这样写也获取不到，第一次用这个插件 希望得到指点
<template>
<div v-if="showMaskLayout" class="image-overlay" @click="closeViewer">
<swiper ref="mySwiper" :options="swiperOption" class="swiper">
<swiper-slide v-for="(image, index) in urls" :key="index" class="my-slide-zoomed">
<div class="swiper-zoom-container">
<img :src="image" />
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';
export default {
data() {
return {
swiperOption: {
width: window.innerWidth,
zoom: true,
initialSlide: this.initialIndex,
},
showMaskLayout: true,
urls: [
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]
};
},
props: {
picList: {
type: Array,
default() {
return [];
},
},
currentImg: {
type: [String, Array],
default: () => '',
},
initialIndex: {
type: Number,
default: 0,
},
maskClosable: {
type: Boolean,
default: true,
},
},
components: {
Swiper,
SwiperSlide,
},
mounted() {
this.initSwiper(); // 在 mounted 中初始化 Swiper
},
created() {
console.log('initialIndex', this.initialIndex)
},
methods: {
closeViewer() {
this.showMaskLayout = false;
document.body.style.overflow = ''; // 恢复滚动条
},
initSwiper() {
this.$nextTick(() => {
if (this.$refs.mySwiper && this.$refs.mySwiper.swiper) {
this.$refs.mySwiper.swiper.update(); // 更新 Swiper 实例
this.$refs.mySwiper.swiper.slideTo(this.initialIndex, 0, false);
} else {
// 如果 Swiper 实例未被创建，手动创建
this.swiperOption = {
...this.swiperOption,
initialSlide: this.initialIndex
};
}
});
}
},
watch: {
showMaskLayout(newVal) {
if (newVal) {
this.initSwiper(); // 当弹层打开时初始化 Swiper
}
}
},
};
</script>
<style scoped>
.image-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 1);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
overflow: clip;
list-style: none;
padding: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-shrink: 0;
height: 100%;
position: relative;
transition-property: transform;
overflow: hidden;
display: block;
img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
}
</style>
问题已解决，代码如下