微信小程序—用wx:for写swiper轮播图

用wx:for写swiper轮播图

新建一个swiper目录=》新建swiperPage

1、在swiper.wxml
autoplay=“true” 自动播放
interval=“500” 时间间隔
circular=“true” 衔接滑动，不然能看到从最后一张图片跳转到第一张的过程

<view class="container">
  <swiper
    autoplay="true"
    interval="500"
    circular="true"
  >
    <swiper-item
      wx:key="{{index}}"
      wx:for="{{imgUrls}}"
    >
      <image src="{{item}}" class="slide-image" />
    </swiper-item>
  </swiper>
</view>

2、在swiper.js

data: {
    imgUrls: [
      '../../images/1.jpg', 
      '../../images/2.jpg',
      '../../images/3.jpg'
    ]
  },

注意：会遇到图片无法显示的问题，是样式问题

3、swiper.wxss

.container{
  width: 750rpx;
}
.container swiper{
  width: 100%;
}
.container swiper image{
  width: 100%;
}

一定要设置宽度