微信小程序 swiper组件轮播图宽度自适应

swiper.wxml:

绑定bindload方法对image标签的图片显示成功时做处理

<!--pages/components/swiper/swiper.wxml-->
<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
  <swiper-item wx:for="{{imgSrc}}" wx:key="image">
    <image class="image" src="{{item.img}}" style="width: {{imageWidth}}px;" bindload="imageLoad" alt="" />
  </swiper-item>
</swiper>

index.js:

使用bindload方法实现图片宽度自适应

data: {
    imgSrc: [{
        img: "../../images/p1.jpg"
      },
      {
        img: "../../images/p2.jpg"
      },
      {
        img: "../../images/p3.jpg"
      },
      {
        img: "../../images/p4.jpg"
      }
    ]
  },

imageLoad: function () {
    this.setData({
      imageWidth: wx.getSystemInfoSync().windowWidth, //图片宽度自适应
      indicatorDots: true, //指示点
      vertical: false,
      autoplay: true,
      circular: false, //是否采用衔接滑动
      interval: 2000,
      duration: 500,
      previousMargin: 0,
      nextMargin: 0
    })
  }