微信小程序swiper高度

在打造一款微信小程序时，有一个组件绝对不能忽视，那就是swiper，作为一款轮播图组件，它在展示页面中起着至关重要的作用，而今天，我们就来聊聊swiper高度设置那些事儿，让你的小程序页面更加美观、大方。

我们要明确一点，swiper组件的高度并不是固定不变的，它需要根据内容自适应，如何才能让swiper高度恰到好处地展示呢？以下就是小编为大家整理的一些技巧和方法。

初始高度设置

在开始之前，我们需要给swiper一个初始高度，这个高度可以是一个固定值，也可以是百分比，为了防止内容溢出，我们可以先将高度设置为100%。

<swiper height="100%">
  <!-- swiper-item -->
</swiper>

动态获取图片高度

很多时候，我们的swiper中展示的是图片，为了使图片能够完整展示,我们需要根据图片的实际尺寸来设置swiper的高度。

在wxml中，为swiper-item添加bindload事件。

<swiper>
  <block wx:for="{{imgList}}" wx:key="index">
    <swiper-item bindload="imageLoad">
      <image src="{{item}}" mode="widthFix"></image>
    </swiper-item>
  </block>
</swiper>

在js中，编写imageLoad函数，获取图片实际宽高,并计算swiper高度。

Page({
  data: {
    imgList: [], // 图片数组
    swiperHeight: 0 // swiper高度
  },
  imageLoad: function(e) {
    var that = this;
    var imgWidth = e.detail.width; // 图片实际宽度
    var imgHeight = e.detail.height; // 图片实际高度
    // 计算swiper高度
    var swiperHeight = (imgHeight * 750) / imgWidth;
    that.setData({
      swiperHeight: swiperHeight
    });
  }
});

在wxss中,为swiper设置高度。

swiper {
  height: {{swiperHeight}}rpx;
}

高度

如果你的swiper中不仅包含图片，还有文字等其他元素,那么我们需要根据内容高度来设置swiper高度。

在wxml中，为swiper-item添加class。

<swiper>
  <block wx:for="{{contentList}}" wx:key="index">
    <swiper-item class="swiper-item">
      <!-- 内容 -->
    </swiper-item>
  </block>
</swiper>

在js中，使用wx.createSelectorQuery获取元素高度。

Page({
  data: {
    contentList: [], // 内容数组
    swiperHeight: 0 // swiper高度
  },
  onLoad: function() {
    var that = this;
    var query = wx.createSelectorQuery();
    query.select('.swiper-item').boundingClientRect();
    query.exec(function(res) {
      that.setData({
        swiperHeight: res[0].height
      });
    });
  }
});

在wxss中,为swiper设置高度。

swiper {
  height: {{swiperHeight}}px;
}

通过以上三种方法，相信你已经能够轻松设置微信小程序swiper的高度了，需要注意的是，不同的场景和需求，可能需要采用不同的方法，在实际开发过程中，我们要灵活运用,让swiper高度设置更加完美。

还想提醒大家，小程序的开发是一个持续学习和积累的过程，在设置swiper高度时，我们不仅要关注美观度，还要考虑用户体验，希望这篇文章能对你有所帮助,让你的小程序更加出色！