微信度量单位 1px = 2rpx; 这个是以iphone6的尺寸作为一个基准,可视宽高(宽:375px;高:603px)
废话不多说,直接贴代码跟图
wxml如下:
<view>
<view style='height:200rpx;width :100%;background:yellow'>这是高度为200rpx的view</view>
<scroll-view style='background:red;width:100%;height:{{height}}rpx' >
这是高度动态计算的scroll-view
</scroll-view>
</view>
js如下:
onShow:function(){
let that = this;
wx.getSystemInfo({
success(res) {
console.log(res)
let height = (res.windowHeight * 2) * (375 / (res.windowWidth)) - 200 ;
that.setData({
height: height
})
}
})
}
效果图如下:
网友回复
题外话:
固定头部带scroll-view的布局,可以用flex。大致意思是:
<page style="height:100%;display:flex;flex-direction:column">
<view style="height:200rpx"></view>
<scroll-view style="height:10rpx;flex:1"></scroll-view>
</page>