微信小程序swiper高度

微信小程序中swiper组件的高度可以通过设置swiper-item的高度来决定，swiper-item的高度可以通过内部元素的高度自适应或者通过设置固定高度来确定。

如果你想让swiper-item的高度自适应内部元素的高度，可以在swiper-item中添加一个view元素，设置view元素的高度为100%，然后在view元素中添加需要展示的内容。

如果你想设置swiper-item的固定高度，可以直接在swiper-item中设置height属性，如：

<swiper-item>
  <view style="height: 200rpx;">内容</view>
</swiper-item>

其中200rpx是要设置的高度值，单位是rpx。

相关问题

微信小程序swiper高度自适应

微信小程序的swiper组件默认是根据图片的高度来设置swiper的高度的，所以如果要实现swiper高度自适应的效果，可以采用以下几种方式：

1. 使用image组件获取图片的高度：在swiper-item中使用image组件来展示图片，并设置mode为aspectFill，然后通过image组件的bindload事件获取到图片加载后的高度，并将该高度动态赋值给swiper组件的高度属性。例如：

<swiper style="height:{{swiperHeight}}px;" current="{{current}}">
  <block wx:for="{{imageList}}" wx:key="*this">
    <swiper-item>
      <image src="{{item}}" mode="aspectFill" bindload="getImageHeight"></image>
    </swiper-item>
  </block>
</swiper>

Page({
  data: {
    swiperHeight: 0,
    current: 0,
    imageList: ['image1.png', 'image2.png', 'image3.png'],
  },
  getImageHeight: function(e) {
    const { index, height } = e.currentTarget.dataset;
    this.setData({
      swiperHeight: height
    });
  }
})

2. 使用wx.createSelectorQuery获取图片高度：在onLoad生命周期函数中使用wx.createSelectorQuery来获取图片的高度，并将该高度动态赋值给swiper组件的高度属性。例如：

Page({
  data: {
    swiperHeight: 0,
    current: 0,
    imageList: ['image1.png', 'image2.png', 'image3.png'],
  },
  onLoad: function() {
    const query = wx.createSelectorQuery();
    query.select('.swiper-item-image').boundingClientRect(res => {
      this.setData({
        swiperHeight: res.height
      });
    }).exec();
  }
})

<swiper style="height:{{swiperHeight}}px;" current="{{current}}">
  <block wx:for="{{imageList}}" wx:key="*this">
    <swiper-item>
      <image class="swiper-item-image" src="{{item}}" mode="aspectFill"></image>
    </swiper-item>
  </block>
</swiper>

以上两种方式都可以实现swiper高度自适应的效果，你可以根据自己的实际需求选择其中一种方法来实现。

微信小程序swiper-item高度自动

微信小程序的 swiper-item 是可以自适应内容高度的，只需要设置 swiper-item 的样式即可。

首先，需要将 swiper-item 的高度设置为 auto，如下：

<swiper>
  <swiper-item style="height: auto;">
    <!-- 内容 -->
  </swiper-item>
</swiper>

然后，需要在 swiper-item 内部的元素上设置宽度和高度的自适应，如下：

<swiper>
  <swiper-item style="height: auto;">
    <view style="width: 100%; height: 100%;">内容</view>
  </swiper-item>
</swiper>

这样就可以让 swiper-item 的高度自适应内容高度了。如果 swiper-item 内部有多个元素，可以将它们都包裹在一个 view 中，并设置 view 的宽度和高度自适应即可。