uniapp 仿小红书轮播图效果

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

1.单张图片时容器根据图片像素定高

2.多图时轮播图容器高度以首图为锚点

3.比首图长则固高左右留白

4.比首图短则固宽上下留白

代码如下：

go 复制代码

<template>
  <view>
<!--轮播-->
   <swiper
      class="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 = 400
		  return new Promise((resolve, reject) => {
		    wx.getImageInfo({
		      src: imageUrl,
		      success: (res) => {
		        const { width, height } = res
		        uni.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>

效果图

在这里插入图片描述