<view class="page-section-spacing">
<swiper class="swiper"
indicator-dots="true"
autoplay="true"
interval="5000"
duration="1500" >
<swiper-item v-for="(item , index) in homeSlide" :key="index">
<image :src="item.img" ></image>
</swiper-item>
</swiper>
</view>
- indicator-dots 表示是否显示指示器,默认是 false
- autoplay 表示是否自动轮播,默认是 false
- interval 表示自动切换的时间间隔,默认是 5000ms
- duration 表示滑动动画时长,默认是 500ms
data() {
return {
homeSlide:[
{img:'/static/adv.png'},
{img:'/static/adv.png'},
{img:'/static/adv.png'},
],
iDays:0,
}
},
.swiper{
width: 683upx;//必须设置高度,我刚开始没有设置宽度,导致图片没有出现,浪费了很长时间才发现这个问题
height: 300upx;
}
.swiper-item image{
width: 100%;
height: 100%;
}