小程序的第一个点轮播图,肯定是从首页开始开发的,那么轮播图是必备的,一个比较不错的轮播图。
wxml
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
<block wx:for="{{activePhoto}}" wx:for-index="index">
<swiper-item>
<image src="{{item.url}}" class="slide-image" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
wxss
.swiper {
height: 300rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}
js
var app = getApp()
Page({
data: {
activePhoto:[
{url:'1.jpg'} ,
{url:'2.jpg'} ,
{url:'3.jpg'} ,
{url:'4.jpg'}
]
},
onLoad: function () {
}
})