一、效果图
![](https://i-blog.csdnimg.cn/blog_migrate/4ccfa960150b08dd3d1617d3f8104fb7.png)
二、代码
<template>
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
<swiper-item v-for='(item,index) in dataList' :key='index'>
<view class="swiper-item">
<image class='swiper-img' :src="item.imgUrl" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
</template>
<style scoped>
swiper{
width:100%;
height: 360rpx;
}
.swiper-img{
width:100%;
height: 360rpx;
}
</style>
三、修改样式在App.vue 中的style写
<style lang="scss">
@import "uview-ui/index.scss";
/* #ifdef APP-PLUS || H5*/
uni-swiper .uni-swiper-dot {
width: 40rpx;
height: 4rpx;
}
uni-swiper .uni-swiper-dot-active {
width: 40rpx;
border-radius: 6rpx;
}
/* #endif */
/* #ifdef MP-WEIXIN */
wx-swiper .wx-swiper-dot {
width: 40rpx;
height: 4rpx;
}
wx-swiper .wx-swiper-dot-active {
width: 40rpx;
height: 4rpx;
border-radius: 6rpx;
}
/* #endif */
</style>