当前位置：首页 > news >正文

uniapp 仿小红书轮播图效果

news 来源：原创 2025/4/25 8:08:24

通过对小红书的轮播图分析，可得出以下总结：

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>