//index.js
//获取应用实例
const app = getApp()


Page({
  data: {
    //轮播图数据
    imgUrls: [
    '/images/swiper1.jpg',
    '/images/swiper2.jpg',
    '/images/swiper3.jpg',
    '/images/swiper4.jpg',
    '/images/swiper5.jpg',
    '/images/swiper6.jpg'
    ],
    //是否显示面板指示点
    indicatorDots: true,
    //是否自动切换
    autoplay: true,
    //自动切换时间间隔
    interval: 3000,
    //滑动动画时长
    duration: 1000
    }


})

<!--index.wxml-->


<view class="container">


<!--轮播图组件-->
<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">


  <!--遍历imgUrls数组,生成多个swiper-item组件-->
  <block wx:for="{{imgUrls}}" wx:for-item="item" wx:key="*this">
    
    <swiper-item>
      <image src="{{item}}" class="swiper-image"/>
    </swiper-item>
    
  </block>


</swiper>


</view>

/* index.wxss */
.container {
  /*设置容器的高度为100%*/
  height: 100%;
  }
  
  .swiper {
  /*设置轮播图的高度为50%*/
  height: 50%;
  }
  
  .swiper-image {
  /*设置图片的宽度和高度为100%*/
  width: 100%;
  height: 100%;
  }