微信小程序中轮播图的实现

微信小程序中轮播图的实现

最近在使用WePY框架开发一款微信小程序，下面是记录的在首页中实现一个图片轮播功能的具体实现。
1.template中使用swiper标签。

    <swiper class="swiper" indicator-active-color="{{indicatorActiveColor}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
      <block wx:for="{{imgUrls}}" wx:key="key">
        <swiper-item>
          <image src="{{item}}" class="slide-image"/>
        </swiper-item>
      </block>
    </swiper>

2.script中定义一个data。

  data = {
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    indicatorActiveColor: '#fff',
    imgUrls: [
      '../images/swiper1.jpg',
      '../images/swiper2.jpg',
      '../images/swiper3.jpg',
      '../images/swiper4.jpg'
    ]
  }