FIG swiper rotation of the micro-channel pictures applet highly adaptive

Carousel Figure applet is very simple, there are examples of official, but only flaw is fixed swiper is dead 150px height, so if the incoming image is larger than this height will be hidden. Spicy what, how to make pictures of different adaptive resolution pinch.

My thinking is : get the screen width, obtain pictures of width and height, and then set the geometric height of the current swiper under the screen width.

1. Structure

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style='height:{{Height}}'>
      <block wx:for="{{imgUrls}}">
        <swiper-item>
            <image src="{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight'/>   //bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦，还有就是设置这个image 100%宽度哟
        </swiper-item>
      </block>
</swiper>

Swiper each property in the official documents we have here is not explained. The most important is: style = 'height: {{Height}}' // dynamically set the height of swiper

2. On the inside page:

data: {
    imgUrls: [                   
        '../img/goodsDetail/goods.png',
        '../img/goodsDetail/goods.png',
        '../img/goodsDetail/goods.png'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1300,
    bg: '#C79C77',
    Height:""          //这是swiper要动态设置的高度属性
 },
imgHeight:function(e){
    var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
    var imgh=e.detail.height;//图片高度
    var imgw=e.detail.width;//图片宽度
    var swiperH=winWid*imgh/imgw + "px"//等比设置swiper的高度。  即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度    ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
    this.setData({
        Height:swiperH//设置高度
    })
},

Summary: Get the current screen width: . Wx.getSystemInfoSync () windowWidth
dynamic properties applet is provided, only ({}) is set by the setData, css and js directly operate a bit pattern similar

Note: image If after the containers have an outer layer, and image width set to 100%, from its installed little distance container bottom, because it is the default setting of image display: inline-block property, which generates a gap . If you want to support full container, set to display: block it.

Guess you like