微信小程序學習（三）之swiper組件

一、效果

二、代碼

<!--學習swiper焦點圖組件-->
<view class="title">學習swiper焦點圖組件</view>
<view class="student">2016/11/26 [email protected]</view>
<view>
    <text>\n
    1、swiper組件相當於網頁中的焦點圖(或幻燈片)展示。
    2、indicator-dots是否顯示切換的圓點。
    3、autoplay表示是否自動切換幻燈片。
    4、current表示當前定位到哪張圖，從0開始，在切換過程中，它的值會改變，一改變又會觸發回調。
    5、interval表示自動切換時間間隔，單位統一都是ms(毫秒)。
    6、duration表示滑動動畫時長。
    7、bindchange在切換過程中，可以通過設置些參數來綁定回調函數。
    \n</text>
</view>

<swiper indicator-dots="true" autoplay="true" current="0" interval="3000" duration="1000" bindchange="change" style="width:{{systemInfo.windowWidth}}px; height:{{systemInfo.windowWidth/2}}px">
    <swiper-item><image src="../../images/m1.png" height="" class="swiper-image" /></swiper-item>
    <swiper-item><image src="../../images/m2.png" height="" class="swiper-image" /></swiper-item>
</swiper>

let app = getApp();

Page({
    data: {
        systemInfo:null,
    },
    onLoad: function() {
        let that = this;
        app.getSystemInfo(function(systemInfo) {
            that.setData({
                systemInfo: systemInfo,
            });
        });
        console.info(that.data.systemInfo);
    },
    change(e) {
              console.info('我移動到第'+(e.detail.current+1)+'張圖了');
    },

});