一.页面效果wxml代码:
<swiper class="swiper" indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
二.js控制轮播图片代码部分:
data: {//初始值
TbBackgroundColor:"white",
imgUrls: [//图片路径
'/index/img/02.jpg',
'/index/img/03.jpg',
'/index/img/04.jpg',
'/index/img/05.jpg',
'/index/img/06.jpg',
'/index/img/07.jpg',
],
indicatorDots: true,
autoplay: true,
circular: true,
interval: 2000,
duration: 1000
},
三.样式wxss部分代码:
.swiper{margin-top: 20px;width: 100%;height: 200px}
.slide-image{width: 100%;height: 100%}