小程序轮播图组件的适配问题

1.问题描述

如上图所示，小程序使用image组件展示图片时，当设置mode为widthFix时，图片的高度是根据图片宽度以及图片的宽高比计算得出的。然而可以看出，轮播图item的自身宽度是150px。因此轮播图的高度和image高度存在一定差别。

进一步来看，如果此时把轮播图宽度设置为80%，此时image的高度就会跟着变小很多。然而此时轮播图的高度固定，此时轮播图下方的指示点就会出现适配问题，它出现在了图片的下方。

所以由于上述问题，如果设置机型为iPhone5，轮播图的显示效果如下：指示点的显示存在适配问题。

解决上述问题的核心思路在于：如何设置轮播图的高度和图片保持一致

2.解决问题

1.获取image组件的高度

利用image组件的监听函数bindload，当图片加载完成时触发监听：在监听函数内获取image组件的高度。

swiperHeight是对应的页面js文件中存储的data数据

data: {
        banners: [],
        swiperHeight: 0
    },

handleSwiperImageLoaded: function() {
    // 获取图片组件image的高度
    const query = wx.createSelectorQuery()
    // Rect矩形内包含宽度和高度
    query.select('.swiper-image').boundingClientRect()
    query.exec((res) => {
        const rect = res[0]
        console.log(rect.height);
        this.setData({ swiperHeight: rect.height })
    })
}

通过以上函数可以获取到image组件的实际高度，

2.将高度设置到swiper

通过style行内样式，直接将高度设置到小程序内置的轮播图组件swiper当中。这样就可以解决轮播图的适配问题。

<!-- 轮播图 -->
<swiper class="swiper"
  indicator-dots
  autoplay
  circular
  style="height: {{swiperHeight}}px;"
  >
  <block wx:for="{{banners}}" wx:key="{{bannerId}}">
    <swiper-item class="swiper-item">
      <image 
        src="{{item.pic}}" 
        class="swiper-image" 
        mode="widthFix" 
        bindload="handleSwiperImageLoaded"
        ></image>
    </swiper-item>
  </block>
</swiper>

更新完轮播图的代码后，再将调试机型换为iPhone5,可以看解决了问题