微信小程序——swiper轮播图

swiper轮播图

wxml

 <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{img}}" wx:key="*this" >
          <swiper-item>
          //这里放的是你要轮播的图片
            <image src="{{item}}"></image>
          </swiper-item>
        </block>
      </swiper>
    </view>

js

 Page({
  data: {
    img: [
      '../img/1.jpg', 
      '../img/3.jpg', 
      '../img/4.png'
      ],
    indicatorDots: true,//是否显示圆点
    vertical: false,//滑动方向是否为纵向
    autoplay: true,//是否自动切换
    interval: 2000,//自动切换时间间隔
    duration: 500//滑动动画时长
  },
})

具体效果是做好了，但是图片并没有自适应，现在就来看看图片怎么来自适用吧！
swiper轮播图自适应
wxml

//接上一个wxml文件
 <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style='width:100%;height:{{heig}}'>//这里添加style样式
        <block wx:for="{{img}}" wx:key="*this" >
          <swiper-item>
            <image src="{{item}}" mode='widthFix' bindload="imageLoad"></image>//这里再添加mode和imageLoad事件
          </swiper-item>
        </block>
      </swiper>

js

//接上一个js文件
 Page({
  imageLoad: function (e) {
    var winWid = wx.getSystemInfoSync().windowWidth; //获取屏幕宽度
    var imgWid = e.detail.width; //图片高度
    var imgHeg = e.detail.height; //图片高度
    this.setData({
      heig: winWid * imgHeg / imgWid + 'px'
    })
  },
  data: {
    img: [
      '../img/1.jpg', 
      '../img/3.jpg', 
      '../img/4.png'
      ],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 2000,
    duration: 500
  },
})

以上就是图片自适应咯

目录结构：