小程序swiper高度自适应

最新推荐文章于 2023-02-02 19:33:48 发布

栾雨

最新推荐文章于 2023-02-02 19:33:48 发布

阅读量196

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_42934839/article/details/102966431

版权

小程序专栏收录该内容

15 篇文章 0 订阅

订阅专栏

WXML

<swiper indicator-dots="true" autoplay="true" interval="3000" style='height:{{bannerHeight}}px'>
        <block wx:for="{{imgUrls}}" wx:key="key">
          <swiper-item>
            <image src="{{item}}" mode="widthFix" class="slide-image" bindload='imageLoad' />
          </swiper-item>
        </block>
      </swiper>

WXSS

swiper{width: 100%;}

.slide-image {
 width: 100%;
}

data:{
	imgUrls:[
      'banner3.png',
      'banner.png',
      'banner1.png',
      'banner2.png',
      'banner4.png'
    ],
}
imageLoad: function (e) {
    var res = wx.getSystemInfoSync();
    var imgwidth = e.detail.width,
      imgheight = e.detail.height,
      ratio = imgwidth / imgheight;
    this.setData({
      bannerHeight: res.windowWidth / ratio -10
    })

  },