使用uniapp写一个轮播图

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

在pages文件夹下新建一个banner文件夹，在banner文件夹下新建一个banner.vue文件。在banner.vue文件中编写以下代码：

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

<script>
export default {
  data() {
    return {
      bannerList: [
        {
          imgUrl:
            "https://cdn.pixabay.com/photo/2019/10/23/18/31/mountains-4575350_960_720.jpg",
        },
        {
          imgUrl:
            "https://cdn.pixabay.com/photo/2014/09/07/21/52/city-438393_960_720.jpg",
        },
        {
          imgUrl:
            "https://cdn.pixabay.com/photo/2020/12/07/16/33/sunset-5813748_960_720.jpg",
        },
      ],
    };
  },
};
</script>

<style>
.banner {
  height: 300rpx;
  width: 100%;
}
</style>

在main.js文件中导入并注册banner组件：

import Vue from 'vue'
import App from './App'
import banner from './pages/banner/banner.vue'

Vue.component('banner', banner)

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

在需要使用轮播图的页面中使用banner组件：

<template>
  <view>
    <banner></banner>
  </view>
</template>

<script>
export default {};
</script>

<style scoped></style>

注意：在使用组件时需要先在main.js中导入并注册组件，然后才能在页面中使用。