3_圖片輪播

圖片輪播使用

1. 業務代碼

1. var app = getApp()
2. Page({
3. data: {
4. movies: [
5. { id: 1, img: "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" },
6. { id: 2, img: "http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" },
7. { id: 3, img: "http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg" },
8. ]
9. },
10. onLoad: function () {},
11.  
12. // 每一個item的點擊事件
13. onItemClick: function (event) {
14. wx.showToast({
15. title: event.target.dataset.postid + "",
16. })
17. }
18. })

2. 界面UI

1. <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000" circular='true' bindtap="onItemClick">
2.  
3. <block wx:for="{{movies}}" wx:for-index="index">
4. <swiper-item>
5.  
6. <image src="{{item.img}}" class="slide-image" mode="aspectFill" data-postId="{{item.id}}"/>
7.  
8. </swiper-item>
9.  
10. </block>
11.  
12.  
13. </swiper>