uni-scroll-view scroll-x高度样式修改

### 修改 `uni-scroll-view` 组件中 `scroll-x` 高度样式的方法

在 UniApp 中调整 `uni-scroll-view` 组件的高度可以通过 CSS 来实现。对于设置了 `scroll-x="true"` 属性的组件，其宽度会自动适应父容器，而高度则可以自定义设定。

#### 使用内联样式或类名方式设置高度

可以直接通过给 `<scroll-view>` 标签添加 `style` 或者绑定一个预先定义好的 class 类来指定高度：

<template>
  <view>
    <!-- 内联样式 -->
    <scroll-view scroll-x="true" :style="{ height: '200px' }">
      <!-- 子元素 -->
    </scroll-view>

    <!-- 定义class并应用 -->
    <scroll-view scroll-x="true" class="custom-height">
      <!-- 子元素 -->
    </scroll-view>
  </view>
</template>

<style scoped>
.custom-height {
  height: 200px;
}
</style>

如果希望动态改变高度，则可以在 Vue 实例的数据属性里声明变量，并将其绑定到 style 上面去[^1]。

#### 动态计算高度

当页面加载完成或者某些条件变化时可能需要重新计算滚动视图的高度，在这种情况下应该监听这些事件并在回调函数里面更新对应样式的值:

export default {
  data() {
    return {
      scrollViewHeight: "auto", // 初始状态下的默认高度
    };
  },
  mounted() {
    this.updateScrollViewHeight();
  },
  methods: {
    updateScrollViewHeight() {
      const query = uni.createSelectorQuery().in(this);
      query.select(".content").boundingClientRect((data) => {
        if (data !== null && typeof data.height === "number") {
          this.scrollViewHeight = `${data.height}px`;
        }
      }).exec();
    }
  }
};

上述代码片段展示了如何利用 `mounted()` 生命周期钩子以及 `updateScrollViewHeight()` 方法来获取目标 DOM 节点的实际尺寸从而决定 `scroll-view` 的最终显示高度[^2]。