uniapp swiper自适应内容高度

在uniapp中，实现swiper自适应内容高度的方法与在普通网页中类似。不过需要注意的是，uniapp中的Swiper组件是基于第三方Swiper库封装的，需要使用相应的API来操作。

以下是实现swiper自适应内容高度的具体步骤：

1. 在Swiper初始化的时候，通过uni.createSelectorQuery()方法获取Swiper容器和所有的slide元素。

onLoad() {
  uni.createSelectorQuery().in(this).select('.swiper-container').fields({
    size: true
  }, this.onContainerSizeReady).exec();
},

onContainerSizeReady(res) {
  var swiperContainerWidth = res.width;
  uni.createSelectorQuery().in(this).selectAll('.swiper-slide').boundingClientRect(this.onSlidesSizeReady).exec();
},

2. 遍历所有的slide元素，计算出最高的slide高度。

onSlidesSizeReady(res) {
  var slidesHeight = res.map(function (item) { return item.height; });
  var maxHeight = Math.max.apply(null, slidesHeight);
  this.swiperHeight = maxHeight;
},

3. 在Swiper组件中，使用swiperHeight属性设置Swiper容器的高度为最高slide的高度。

<swiper class="swiper-container" :style="'height:' + swiperHeight + 'px;'">
  <swiper-item class="swiper-slide" v-for="(item, index) in items" :key="index">{{ item.content }}</swiper-item>
</swiper>

完整的实现代码如下：

export default {
  data() {
    return {
      items: [
        { content: 'Slide 1' },
        { content: 'Slide 2' },
        { content: 'Slide 3' },
        { content: 'Slide 4' },
        { content: 'Slide 5' },
      ],
      swiperHeight: 0
    }
  },

  onLoad() {
    uni.createSelectorQuery().in(this).select('.swiper-container').fields({
      size: true
    }, this.onContainerSizeReady).exec();
  },

  onContainerSizeReady(res) {
    var swiperContainerWidth = res.width;
    uni.createSelectorQuery().in(this).selectAll('.swiper-slide').boundingClientRect(this.onSlidesSizeReady).exec();
  },

  onSlidesSizeReady(res) {
    var slidesHeight = res.map(function (item) { return item.height; });
    var maxHeight = Math.max.apply(null, slidesHeight);
    this.swiperHeight = maxHeight;
  }
}

需要注意的是，uniapp中的Swiper组件还提供了其他的API，如autoplay、loop、pagination等，可以根据需要进行设置。同时，uniapp中的Swiper组件也支持嵌套使用，可以实现更为复杂的滑动效果。