转自：https://blog.csdn.net/hjd2018/article/details/137261819
<template>
<view class="top_swiper">
<swiper @change="onSwiperChange" class="swiper" :style="{ height: swiperHeight }" circular indicator-dots="true" :autoplay="true" interval="2000" duration="500">
<block v-for="(item, index) in bannerList" :key="item.id">
<swiper-item>
<image class="top_swiper_img" :src="item.image" alt="" mode="widthFix" @load="imageLoaded(index, $event)" />
</swiper-item>
</block>
</swiper>
</view>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { post } from '../../libs/request.js'
const bannerList = ref([])
const swiperHeight = ref('300rpx');
const imageHeights = ref([]); // 存储图片的高度
onMounted(() => {
getBanner();
})
/**
* 图片加载完成
*/
const imageLoaded = (index, event) => {
const { width, height } = event.detail;
let actualHeight = height / (width / 750);
imageHeights.value[index] = actualHeight;
if (index === 0) {
swiperHeight.value = actualHeight + 'rpx';
}
}
/**
* swiper 切换
*/
const onSwiperChange = async (e) => {
const index = e.detail.current;
await nextTick();
const currentImageHeight = imageHeights.value[index];
swiperHeight.value = currentImageHeight + 'rpx';
}
/**
* 获取轮播图
*/
const getBanner = () => {
post("Banner/getList", {}).then((result) => {
if (result.code == 0) {
bannerList.value = result.data;
}
})
}
</script>
