沉浸式banner轮播图 uniapp

沉浸式banner轮播图是指在uniapp中使用全屏的方式展示轮播图，使得图片能够充满整个屏幕，给用户带来更好的视觉体验。下面是一个使用uniapp实现沉浸式banner轮播图的例子：

<template>
  <view class="banner">
    <swiper
      class="swiper"
      indicator-dots
      autoplay
      interval="3000"
      duration="500"
    >
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image class="banner-img" :src="item.imgUrl"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [
        { imgUrl: 'https://example.com/banner1.jpg' },
        { imgUrl: 'https://example.com/banner2.jpg' },
        { imgUrl: 'https://example.com/banner3.jpg' },
      ],
    };
  },
};
</script>

<style>
.banner {
  width: 100%;
  height: 100vh;
}

.swiper {
  width: 100%;
  height: 100%;
}

.banner-img {
  width: 100%;
  height: 100%;
}
</style>

在上面的例子中，我们使用了uniapp的swiper组件来实现轮播图的效果。通过设置swiper的属性，如indicator-dots（显示指示点）、autoplay（自动播放）、interval（自动切换时间间隔）和duration（滑动动画时长），可以实现不同的轮播效果。

同时，我们使用了v-for指令来遍历bannerList数组，动态生成swiper-item，并通过绑定item.imgUrl来设置每个轮播项的图片地址。

最后，通过设置样式，使得轮播图充满整个屏幕。