微信小程序轮播图-swiper组件使用

1.wxml

<view>
  <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000" circular="true">  
        <block wx:for="{{movies}}" wx:for-index="index">  
          <swiper-item>  
            <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>  
          </swiper-item>  
        </block>  
  </swiper> 
 </view>

2.js

 data: {
    movies: [
      { url: '/pages/first/images/2018071201323256.jpg' },
      { url: '/pages/first/images/20190227123011121.jpg' },
      { url: '/pages/first/images/20190329192150357.jpg' },
    ],
  },

3.wxss

swiper{
  width: 100%;
  height: 400rpx;
}
swiper image{
  width: 100%;
  height: 100%;
}

4.swiper属性

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html