uniapp h5 scroll-view高度自适应

在UniApp中，使用H5的scroll-view组件时，可以通过设置高度自适应来实现内容超出屏幕高度时的滚动效果。以下是一种实现方式：

1. 在页面的样式文件（如`index.vue`）中，给scroll-view组件添加一个样式类，并设置其高度为100%：

<style>
.scroll-view {
  height: 100%;
}
</style>

2. 在页面的模板文件中，使用scroll-view组件，并添加上述样式类：

<template>
  <view class="scroll-view">
    <!-- 这里是scroll-view的内容 -->
  </view>
</template>

这样设置后，scroll-view组件的高度将会自适应屏幕高度，当内容超出屏幕高度时，会出现滚动条。

相关问题

uniapp scroll-view 高度自适应

uniapp中的scroll-view组件可以通过以下方法实现高度自适应：
1. 在scroll-view组件上添加class属性，并设置为"chat-main"，同时添加scroll-y属性并设置为true，这样可以启用纵向滚动。
2. 使用行内样式的方式为scroll-view组件设置高度，可以通过计算得出所需的高度。
3. 在onLoad生命周期函数中使用uni.getSystemInfo方法获取手机系统信息，并通过res.statusBarHeight获取手机状态栏高度。
4. 根据视口高度和其他组件的高度计算scroll-view的剩余高度，将其赋值给scrollviewHeight变量。
5. 将scrollviewHeight绑定到scroll-view组件的style属性上，实现高度自适应。

uniapp的scroll-view高度自适应

要实现`uni-app`中`scroll-view`的高度自适应，可以采用以下几种方法：

1. 使用flex布局：将`scroll-view`的父容器设置为flex布局，并将`scroll-view`的高度设置为100%。这样`scroll-view`会自动拉伸以适应父容器的高度。

<view class="container">
  <scroll-view class="scroll-view" scroll-y>
    <!-- scroll-view的内容 -->
  </scroll-view>
</view>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.scroll-view {
  flex: 1;
}
</style>

2. 使用计算属性：通过计算当前页面的可视高度来动态设置`scroll-view`的高度。

<template>
  <view class="container">
    <scroll-view class="scroll-view" :style="{ height: scrollViewHeight + 'px' }" scroll-y>
      <!-- scroll-view的内容 -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollViewHeight: 0,
    };
  },
  mounted() {
    this.setScrollViewHeight();
  },
  methods: {
    setScrollViewHeight() {
      uni.getSystemInfo({
        success: (res) => {
          const windowHeight = res.windowHeight;
          const query = uni.createSelectorQuery().in(this);
          query.select('.container').boundingClientRect((rect) => {
            const containerHeight = rect.height;
            this.scrollViewHeight = windowHeight - containerHeight;
          }).exec();
        },
      });
    },
  },
};
</script>

<style>
.container {
  height: 100%;
}

.scroll-view {
  height: 100%;
}
</style>

通过上述方法，你可以实现`uni-app`中`scroll-view`的高度自适应。根据你的具体需求，选择其中一种方法即可。