uniapp中如何实现轮播图效果

<template><view><uni-swiper :autoplay="true" :interval="3000" :circular="true"><uni-swiper-item v-for="(item, index) in swiperList" :key="index"><image :src="item.imgUrl" mode="aspectFill" class="swiper-img"></image></uni-swiper-item></uni-swiper></view></template><script>export default {  data() {    return {      swiperList: [        {imgUrl: '图片地址1'},        {imgUrl: '图片地址2'},        {imgUrl: '图片地址3'}      ]    }  },  methods: {    swiperChange(e) {      console.log(e.detail.current)    }  }}</script>

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

npm install vue-awesome-swiper --save

import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper)

<template><div class="swiper">    <swiper :options="swiperOption"><swiper-slide v-for="(item, index) in swiperList" :key="index"><img  :src="item.imgUrl" class="swiper-img" alt="uniapp中如何实现轮播图效果" ></swiper-slide><div class="swiper-pagination" slot="pagination"></div>    </swiper></div></template><script>export default {  data() {    return {      swiperList: [        {imgUrl: '图片地址1'},        {imgUrl: '图片地址2'},        {imgUrl: '图片地址3'}      ],      swiperOption: {        autoplay: {          delay: 3000,          disableOnInteraction: false        },        pagination: {          el: '.swiper-pagination'        }      }    }  },  methods: {    slideChange(swiper) {      console.log(swiper)    }  }}</script><style scoped>.swiper {  height: 200px;}.swiper-img {  width: 100%;  height: 100%;}</style>