微信小程序学习之swiper组件

一、实现效果

二、代码部分

<!--学习swiper焦点图组件-->
<view class="title">学习swiper焦点图组件</view>
<view class="student">2016/11/26 vsiryxm@qq.com</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)+'张图了');
    },
 
});