内容自适应高度 scroll 事件失效

如果你想让内容自适应高度并且能够触发滚动事件，可以使用 `overflow: auto` 属性来实现。这样，当内容超出容器高度时，会显示滚动条，并且滚动事件会正常触发。

以下是一个示例代码：

<div class="container">
  <div class="content">
    <!-- 页面内容 -->
  </div>
</div>

.container {
  height: 300px; /* 设置容器的高度 */
  overflow: auto; /* 当内容超出容器高度时显示滚动条 */
}

.content {
  /* 设置内容自适应高度 */
  height: auto;
  min-height: 100%; /* 可以根据需要设置最小高度 */
}

在上述代码中，我们设置了一个容器 `.container` 的固定高度，并将其 `overflow` 属性设置为 `auto`，这样当内容 `.content` 超出容器高度时，会自动显示滚动条。同时，在内容区域的样式中，我们将高度设置为 `auto`，以使其根据内容的实际高度进行自适应。

请注意，滚动事件只有在内容超出容器高度时才会触发。如果内容没有超出容器高度，滚动事件将不会被触发。

相关问题

scroll-view自适应高度

Scroll-view是小程序中经常使用的滚动视图组件，它能够在内容溢出时自动添加滚动条，在移动设备上提供更好的用户体验。然而，由于scroll-view的高度通常需要手动指定，这使得在不同设备上显示可能不尽如人意，因此需要对其进行自适应高度处理。

首先，可以使用小程序的API获取设备信息，包括屏幕的宽度和高度。然后，根据页面布局和内容的高度，动态计算scroll-view的高度，并将其设置为屏幕高度减去其他元素高度的差值。这样，不同设备上的scroll-view就能够自适应高度了。

另外，在scroll-view的子元素中使用flex布局，可以根据内容的高度自动调整元素的高度，从而进一步实现自适应效果。同时，还可以监听屏幕的resize事件，及时更新scroll-view的高度，以便在用户更改设备方向或大小时保持良好的显示效果。

总的来说，通过动态计算和监听事件，可以实现scroll-view的自适应高度处理，以提高小程序的用户体验和设备兼容性。

uniapp swiper如何根据内容自适应高度

Uniapp Swiper 组件默认高度是固定的，无法根据内容自适应高度。但是可以通过以下两种方式实现：

1. 使用 scroll-view 包裹 swiper，设置 scroll-view 的高度为内容高度

<scroll-view style="height: {{scrollHeight}}px;">
  <swiper :style="{height: swiperHeight + 'px'}">
    <swiper-item v-for="(item, index) in list" :key="index">
      {{item.content}}
    </swiper-item>
  </swiper>
</scroll-view>

export default {
  data() {
    return {
      list: [
        { content: '第1页' },
        { content: '第2页' },
        { content: '第3页' },
      ],
      swiperHeight: 0,
      scrollHeight: 0,
    }
  },
  mounted() {
    this.$nextTick(() => {
      uni.createSelectorQuery().in(this).select('.swiper').boundingClientRect(data => {
        this.swiperHeight = data.height
        uni.createSelectorQuery().in(this).select('.scroll-view').boundingClientRect(data => {
          this.scrollHeight = data.height
        }).exec()
      }).exec()
    })
  }
}

2. 使用自定义组件配合 swiper 实现自适应高度

<!-- my-swiper 组件 -->
<template>
  <swiper :style="{height: swiperHeight + 'px'}">
    <swiper-item v-for="(item, index) in list" :key="index">
      {{item.content}}
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      swiperHeight: 0,
    }
  },
  mounted() {
    this.$nextTick(() => {
      uni.createSelectorQuery().in(this).select('.swiper').boundingClientRect(data => {
        this.swiperHeight = data.height
        this.$emit('swiperHeightChange', data.height)
      }).exec()
    })
  }
}
</script>

<!-- 使用 my-swiper 组件 -->
<template>
  <my-swiper :list="list" @swiperHeightChange="swiperHeight = $event"></my-swiper>
</template>

<script>
import MySwiper from './my-swiper'

export default {
  components: {
    MySwiper,
  },
  data() {
    return {
      list: [
        { content: '第1页' },
        { content: '第2页' },
        { content: '第3页' },
      ],
      swiperHeight: 0,
    }
  },
}
</script>

以上两种方式都可以实现 Uniapp Swiper 组件根据内容自适应高度，选择使用哪种方式根据实际情况选择。