小程序03--轮播（swiper）

轮播图的实例

 index.js

//index.js
var app = getApp()
Page({
  data: {
     imgUrls: [//轮播图的图片数组
      '../../img/banner01.jpg',
      '../../img/banner02.jpg',
      '../../img/banner03.jpg',
      '../../img/banner04.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000

  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.wxml

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-dots="ture">//indicator-dots="ture"设置banner的轮播点
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="750" height="150"/>
    </swiper-item>
  </block>
</swiper>

index.wxss

swiper{
  width: 100%;
  height: 350rpx;
}
swiper image{
  display: block;
  width: 100%;
  height: 100%;
}

微信小程序是以苹果6为标准 宽度为750rpx

成果如下：