通過對小紅書的輪播圖分析，可得出以下總結：
1.單張圖片時容器根據圖片像素定高
2.多圖時輪播圖容器高度以首圖為錨點
3.比首圖長則固高左右留白
4.比首圖短則固寬上下留白
代碼如下：
<template><view>
<!--輪播--><swiperclass="swiper" :style="{ 'height': swiperHeight+ 'px' }"circular:indicator-dots="indicatorDots":autoplay="autoplay":interval="interval":duration="duration"indicator-active-color="#FFFFFF"><swiper-item v-for="(item, index) in imgList" :key="index" ><image class="swiper-image" :src="item" mode="aspectFit" @click="showImage(index)" :style="{ 'height': swiperHeight+ 'px' }"/></swiper-item></swiper></view>
</template>export default {data() {return {indicatorDots: true,autoplay: true,interval: 5000,duration: 300,imgList: ["https://mainoss.duoxiaiche.com/UNCATEGORIZED/1745480113402.jpg", "https://mainoss.duoxiaiche.com/UNCATEGORIZED/1745480117425.jpg", "https://mainoss.duoxiaiche.com/UNCATEGORIZED/1745480122350.jpg"],swiperHeight:400,//默認高度}},onLoad() {const firstImg = this.imgList[0] || ''this.getImgHeight(firstImg).then((heightRes) => {this.swiperHeight = heightRes})},methods: {getImgHeight(imageUrl){let containerHeight = 400return new Promise((resolve, reject) => {wx.getImageInfo({src: imageUrl,success: (res) => {const { width, height } = resuni.getSystemInfo({success: (res) => {const screenWidth = res.windowWidth;const aspectRatio = width / height;const imgHeight = screenWidth / aspectRatio;console.log('imgHeight---',imgHeight)containerHeight = imgHeight && imgHeight < 400 ? imgHeight : 400;resolve(containerHeight)},})},fail: (err) => {console.error('Failed to get image info', err)reject(containerHeight)},})})},// 點擊顯示圖片showImage(index) {uni.previewImage({urls: this.imgList,current: index,indicator: 'number'});},}}
</script><style lang="scss" scoped>
.swiper {.swiper-image {width: 100%;}
}
</style>
效果圖
在這里插入圖片描述
)
