scroll-view高度占满屏幕
时间: 2023-07-08 11:55:43 浏览: 48
要让 scroll-view 的高度占满屏幕,可以在其父元素中设置高度为 100%。具体实现方式如下:
```html
<view style="height:100%">
<scroll-view style="height:100%">
<!-- scroll-view 的内容 -->
</scroll-view>
</view>
```
这样设置后,scroll-view 的高度就会占满整个屏幕。注意,如果 scroll-view 的内容高度不够,可能无法滚动。可以在 scroll-view 上设置 scroll-y 属性为 true,强制启用垂直滚动。
相关问题
小程序scroll-view高度占满屏幕
要使小程序中的`scroll-view`占满整个屏幕高度,可以通过以下步骤实现。
1. 在wxml文件中,将`scroll-view`标签放在一个`<view>`标签中,并给这个`<view>`标签设置高度为`100%`,如下所示:
```
<view style="height: 100%;">
<scroll-view style="height: 100%;">
<!-- scroll-view的内容 -->
</scroll-view>
</view>
```
2. 在对应的wxss文件中,给`scroll-view`和包裹`scroll-view`的`<view>`标签都设置高度为`100%`,如下所示:
```
page {
height: 100%; /* 或者设置为min-height: 100% */
}
scroll-view {
height: 100%;
}
view {
height: 100%;
}
```
这样设置之后,`scroll-view`就可以占满整个屏幕高度了。注意,如果父级元素没有设置高度为`100%`,则这种方法不会生效。
小程序scroll-view高度自适应
可以通过小程序的 wx.createSelectorQuery 接口来获取 scroll-view 内部的实际高度,然后动态设置 scroll-view 的高度。
具体实现步骤如下:
1. 在 scroll-view 的最外层元素上添加一个 id,例如:id="scroll-view-wrap"。
2. 在页面的 onLoad 生命周期中,获取 scroll-view 的实际高度,并设置给 scroll-view。
```javascript
onLoad: function () {
const query = wx.createSelectorQuery()
query.select('#scroll-view-wrap').boundingClientRect()
query.exec(function (res) {
const scrollViewHeight = res[0].height
wx.getSystemInfo({
success: function (res) {
const windowHeight = res.windowHeight
const scrollHeight = scrollViewHeight * (750 / res.windowWidth) // 将 px 单位转换为 rpx
if (scrollHeight > windowHeight) {
// 如果实际高度大于屏幕高度,则设置 scroll-view 的高度为屏幕高度
this.setData({
scrollHeight: windowHeight
})
} else {
// 如果实际高度小于等于屏幕高度,则设置 scroll-view 的高度为实际高度
this.setData({
scrollHeight: scrollHeight
})
}
}.bind(this)
})
}.bind(this))
}
```
3. 在 wxml 中动态设置 scroll-view 的高度。
```html
<scroll-view style="height:{{scrollHeight}}rpx;"></scroll-view>
```
这样就可以实现 scroll-view 高度自适应了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)