007-01、微信小程序---组件之swiper（轮播图）

swiper是小程序提供的可以滑动的视图容器。常用来写轮播图。
1、json

{"navigationBarTitleText":"轮播图"}

2、wxml

<swiper autoplay="{{autoplay}}" current="{{current}}" circular="{{circular}}" interval="{{interval}}" duration="{{duration}}" bindchange="picChange">
    <block wx:for="{{picsUrl}}" wx:key="{{current}}">
        <swiper-item>
            <image src="{{item}}"></image>
        </swiper-item>
    </block>
</swiper>

3、wxss

swiper-item{
    height: 200rpx;
}

4、js

var app = getApp();
Page({
    data:{
        // 轮播
        autoplay: true,
        current: 0,
        circular: true,
        interval: 5000,
        duration: 500,
        picsUrl: []

    },
    picChange: function (e) {

    },
    onLoad:function(options){
        var that = this;
        that.setData({
            picsUrl: [
                "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg",
                "http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg",
                "/images/footer1.png"
            ]   
        });
    },
})      

温馨提示：组件详细属性和用法请参考官网 https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

温馨提示：扫码可以提问、交流。本人有各个行业的小程序前端代码，如有需要也可以扫码留言哦。