uniapp scroll-view 组件无法确定内容的固定高度 怎么解决

问题描述

scroll-view组件无法确定内容的高度

思路

1. 使用可视高度
2. 动态生成高度

代码

使用视口高度

<template>
  <view>
    <scroll-view class="scroll-view" :scroll-y="true">
      <!-- 内容 -->
    </scroll-view>
  </view>
</template>

<style scoped>
.scroll-view {
  height: 100vh; /* 设置高度，这里使用视口高度的 100% */
}
</style>

在上述示例中，scroll-view 使用 scroll-y 属性来启用垂直滚动。高度被设置为视口高度的100%（100vh），这是一种在不知道固定高度的情况下，使其占据整个屏幕高度的一种常见做法。

使用动态计算高度

如果你无法确定内容的固定高度，可以使用 JavaScript 动态计算高度并设置给 scroll-view。通过 ref 引用获取 scroll-view 的实例，并使用 setStyle 方法设置高度。calculateContentHeight 方法用于根据实际情况计算内容的高度。

<template>
  <view>
    <scroll-view class="scroll-view" :scroll-y="true" ref="scrollView">
      <!-- 内容 -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  mounted() {
    // 获取内容高度并设置给 scroll-view
    const contentHeight = this.calculateContentHeight();
    this.$refs.scrollView.setStyle({
      height: `${contentHeight}px`
    });
  },
  methods: {
    calculateContentHeight() {
      // 根据实际业务逻辑计算内容高度
      return // 计算内容高度的逻辑
    }
  }
}
</script>

<style scoped>
.scroll-view {
  overflow: hidden; /* 可以隐藏滚动条 */
}
</style>