uniapp写一个轮播图

以下是一个简单的uniapp轮播图示例：

1. 创建一个页面（如index.vue）并添加以下代码：

<template>
  <view class="container">
    <swiper class="swiper" :autoplay="true" :interval="3000">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image :src="item.imageUrl" mode="aspectFill" class="swiper-image" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [
        {
          imageUrl: 'https://dummyimage.com/600x400/000/fff',
        },
        {
          imageUrl: 'https://dummyimage.com/600x400/333/fff',
        },
        {
          imageUrl: 'https://dummyimage.com/600x400/666/fff',
        },
      ],
    };
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 200px;
}

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

.swiper-image {
  width: 100%;
  height: 100%;
}
</style>

2. 在data中添加一个bannerList数组，包含轮播图的数据。

3. 在template中使用swiper和swiper-item组件来实现轮播图，使用v-for指令循环渲染swiper-item。

4. 在swiper-item中使用image组件来显示图片，src绑定item.imageUrl。

5. 在swiper中添加autoplay和interval属性来启用自动轮播，设置轮播间隔时间。

6. 在style中设置样式，包括容器的宽高，swiper和swiper-image的宽高。

7. 运行项目，即可看到轮播图效果。