微信小程序——实现轮播图效果

index.wxml:

<swiper indicator-dots="true" autoplay="true" interval="3000" duration="800" circular="true">
    <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>

index.js:

Page({
  data:{
    imgUrls: [
      '/assets/images/spouseR/7.png',
      '/assets/images/spouseW/19.png',
      '/assets/images/spouseW/1.png',
      '/assets/images/spouseW/28.png',
      '/assets/images/spouseW/11.png',
      '/assets/images/spouseW/33.png'
    ],
  }
})

index.wxss:

swiper{
  width: 100vw;
  height: 40vh;
}

swiper-item {
  width: 100vw;
  height: 100%;
}

image {
  height: 100%;
  width: 100%;
}