小程序图片轮播自适应

借（抄）鉴（袭）Thor UI 的！！！

index.js

Page({
  data: {
    banner: [
      "http://gw.alicdn.com/tfscom/i2/27574552/TB2LLz8ugJkpuFjSszcXXXfsFXa_!!27574552.jpg",
      "http://gw.alicdn.com/tfscom/i2/27574552/TB2LLz8ugJkpuFjSszcXXXfsFXa_!!27574552.jpg",
      "http://gw.alicdn.com/tfscom/i2/27574552/TB2LLz8ugJkpuFjSszcXXXfsFXa_!!27574552.jpg",
      "http://gw.alicdn.com/tfscom/i2/27574552/TB2LLz8ugJkpuFjSszcXXXfsFXa_!!27574552.jpg",
      "http://gw.alicdn.com/tfscom/i2/27574552/TB2LLz8ugJkpuFjSszcXXXfsFXa_!!27574552.jpg",
      "http://gw.alicdn.com/tfscom/i2/27574552/TB2LLz8ugJkpuFjSszcXXXfsFXa_!!27574552.jpg"
    ],
    scrollH: 0, //滚动总高度
    autoplay: false,//自动播放
    indicatorDots: true,//提示点
    circular: true,//是否采用衔接滑动
    duration: 200
  },
  onLoad: function (options) {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          scrollH: res.windowWidth
        })
      }
    })
  }

})

index.wxml

<view class="tui-banner-swiper">
  <swiper autoplay="{{autoplay}}" duration="{{duration}}" circular="{{circular}}" indicator-dots="{{indicatorDots}}" style="height:{{scrollH}}px" bindchange="bannerChange">
    <block wx:for="{{banner}}" wx:key="{{index}}">
      <swiper-item data-index="{{index}}" catchtap="previewImage">
        <image src="{{item}}" class="tui-slide-image" style="height:{{scrollH}}px" />
      </swiper-item>
    </block> 
  </swiper>
</view>

index.wxss

.tui-banner-swiper {
  position: relative;
}
.tui-slide-image {
  width: 100%;
  display: block;
}