一、效果
二、代码
<!--学习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)+'张图了');
},
});