微信小程序轮播图高度与图片高度不匹配问题

林无静树898

已于 2023-01-13 12:20:59 修改

阅读量1.4k

点赞数 1

文章标签：微信小程序小程序微信

于 2023-01-10 20:13:33 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_60537353/article/details/128635682

版权

微信小程序轮播图高度与图片高度不匹配问题

在微信小程序项目中，为了美观给page设置了padding值，然后让轮播图里面的图片宽度为100%，高度widthFix自适应，出现了如下问题:指示器位置不对

在这里插入图片描述

原因是因为给page设置了padding值，图片100%宽度也会相应减小进自适应的高度也减少，而我们轮播图的高度是不受影响的，指示器位置是相对轮播图组件高度的，因此出现上述问题

解决方法：获取图片高度，然后把图片高度赋值给轮播图高度

wxml代码

<swiper indicator-dots="true" circular autoplay interval="3000"  style="height:{{autoHeight}}px;">
  <block wx:for="{{banners}}" wx:key="index">
    <swiper-item>
       <image class="bannerImage" src="{{item.pic}}" mode="widthFix" bindload="getHeight"/>
      </swiper-item>
  </block>
</swiper>

js代码

getHeight() {
    const query = wx.createSelectorQuery()
    query.select('.bannerImage').boundingClientRect()
    query.exec(res => {
        this.setData({
          autoHeight: res[0].height
        })
    })
  },