【uniapp】通过css动态设置scroll-view高度

### uni-app 中 `scroll-view` 组件的 `scroll-snap-type` 和 `scroll-snap-align` 用法 在 uni-app 开发中，虽然原生 HTML/CSS 提供了 `scroll-snap-type` 和 `scroll-snap-align` 属性来实现滚动吸附效果[^1]，但在微信小程序或其他平台下，这些 CSS 属性可能无法直接应用于 `scroll-view` 组件。因此，在实际开发过程中需要借助一些额外的方式实现类似的滚动吸附功能。 以下是基于 uni-app 的解决方案： #### 实现方案 可以通过自定义样式以及 JavaScript 动态监听滚动事件的方式来模拟滚动吸附的效果。下面是一个完整的示例代码： ```html <template> <view class="container"> <!-- 使用 scroll-view 容器 --> <scroll-view class="scroll-container" scroll-x="true" @scroll="onScroll" :scroll-left="scrollLeft" enhanced :show-scrollbar="false" > <!-- 子项列表 --> <view v-for="(item, index) in items" :key="index" class="scroll-item" :class="'item-' + (index + 1)" > {{ item }} </view> </scroll-view> </view> </template> <script> export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3'], // 数据源 currentIndex: 0, // 当前选中的索引 scrollLeft: 0, // 控制横向滚动位置 }; }, methods: { onScroll(e) { const { detail } = e; let currentOffset = Math.round(detail.scrollLeft / this.getWindowWidth()); if (currentOffset !== this.currentIndex) { this.currentIndex = currentOffset; this.scrollToIndex(this.currentIndex); } }, scrollToIndex(index) { this.scrollLeft = index * this.getWindowWidth(); }, getWindowWidth() { return uni.getSystemInfoSync().windowWidth; // 获取窗口宽度 } }, }; </script> <style scoped> .container { width: 100%; } /* 滚动容器 */ .scroll-container { display: flex; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 单个子项 */ .scroll-item { min-width: 100vw; height: 100vh; box-sizing: border-box; text-align: center; line-height: 100vh; font-size: 24px; } .item-1 { background-color: lightblue; } .item-2 { background-color: lightgreen; } .item-3 { background-color: lightcoral; } </style> ``` #### 关键点解析 1. **`scroll-view` 配置** - 设置 `scroll-x="true"` 来允许水平方向上的滚动。 - 添加 `enhanced` 属性以增强 `scroll-view` 的性能和能力[^3]。 - 利用 `@scroll` 事件监听滚动行为并计算当前显示的内容区域。 2. **动态调整滚动位置** - 计算每次滚动的距离，并通过 `scrollLeft` 参数精确控制滚动到指定的位置。 - 结合设备屏幕宽度 (`uni.getSystemInfoSync().windowWidth`) 自适应不同分辨率下的布局需求。 3. **CSS 样式优化** - 虽然标准的 `scroll-snap-type` 和 `scroll-snap-align` 不被完全支持，但可以模仿其逻辑设计滚动体验。 - 确保每个子项占据整个视口宽高，从而达到视觉上的“吸附”效果。 --- ###