scroll-view 高度
时间: 2023-07-01 16:28:41 浏览: 58
scroll-view 高度可以通过 CSS 的 height 属性或者 JavaScript 动态设置。如果使用 CSS 设置高度,可以使用像素值、百分比或者其他支持的单位。如果使用 JavaScript 设置高度,可以通过 DOM 获取 scroll-view 元素,并设置其 height 属性。例如:
```html
<scroll-view id="my-scroll-view"></scroll-view>
```
```css
#my-scroll-view {
height: 500px;
}
```
```javascript
var myScrollView = document.getElementById("my-scroll-view");
myScrollView.style.height = "500px";
```
相关问题
小程序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 高度自适应了。
scroll-view高度自适应
scroll-view可以通过使用flex布局来实现高度的自适应。将主轴设为y轴,并为scroll-view区域设置flex:1,这样就可以让scroll-view的高度自适应。需要注意的是,除了自适应区域以外的元素一定要指定高度,可以使用相对高度来指定。另外,要确保page是小程序默认包裹在最外层的标签,并且给page指定高度为100%。