uniapp h5 scroll-view高度自适应
时间: 2024-04-22 17:19:16 浏览: 341
在UniApp中,使用H5的scroll-view组件时,可以通过设置高度自适应来实现内容超出屏幕高度时的滚动效果。以下是一种实现方式:
1. 在页面的样式文件(如`index.vue`)中,给scroll-view组件添加一个样式类,并设置其高度为100%:
```css
<style>
.scroll-view {
height: 100%;
}
</style>
```
2. 在页面的模板文件中,使用scroll-view组件,并添加上述样式类:
```html
<template>
<view class="scroll-view">
<!-- 这里是scroll-view的内容 -->
</view>
</template>
```
这样设置后,scroll-view组件的高度将会自适应屏幕高度,当内容超出屏幕高度时,会出现滚动条。
阅读全文
相关推荐















