swiper是小程序提供的可以滑动的视图容器。常用来写轮播图。
1、json
{"navigationBarTitleText":"轮播图"}
2、wxml
<swiper autoplay="{{autoplay}}" current="{{current}}" circular="{{circular}}" interval="{{interval}}" duration="{{duration}}" bindchange="picChange">
<block wx:for="{{picsUrl}}" wx:key="{{current}}">
<swiper-item>
<image src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
3、wxss
swiper-item{
height: 200rpx;
}
4、js
var app = getApp();
Page({
data:{
// 轮播
autoplay: true,
current: 0,
circular: true,
interval: 5000,
duration: 500,
picsUrl: []
},
picChange: function (e) {
},
onLoad:function(options){
var that = this;
that.setData({
picsUrl: [
"http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg",
"http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg",
"/images/footer1.png"
]
});
},
})
温馨提示:组件详细属性和用法请参考官网 https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
温馨提示:扫码可以提问、交流。本人有各个行业的小程序前端代码,如有需要也可以扫码留言哦。