微信小程序的轮播图真是爽歪歪啊,不到二十行代码搞定,相对于安卓简单多了,不下百行代码,问题又多。下面见效果图:
视图层:
<swiper class="swiper" autoplay="true" interval="2000" circular="true" indicator-dots="true">
<block wx:for="{{imageList}}">
<swiper-item>
<image src="{{item}}" class="swiper_item"></image>
</swiper-item>
</block>
</swiper>
控制层:
var util = require('../../../utils/util.js')
Page({
data: {
imageList: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg',
'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg',
'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg',
'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'
]
},
})
真是so easy 啊!