微信小程序页面高度怎么计算？
我们在使用小程序的时候，经常会发现小程序页面上下两部分留有空白，有时候上部分空白多一些，有时候下部分空白多一些，如果想让整个页面被填充，那就要进行微信小程序页面高度计算。以下是操作方法，希望能对大家有所帮助。
先来看看页面：
代码如下：
//index.js
Page({
data: {
second_height:0
},
onLoad: function () {
console.log('onLoad')
var that = this
// 获取系统信息
wx.getSystemInfo({
success: function (res) {
console.log(res);
// 可使用窗口宽度、高度
console.log('height=' + res.windowHeight);
console.log('width=' + res.windowWidth);
// 计算主体部分高度,单位为px
that.setData({
// second部分高度 = 利用窗口可使用高度 - first部分高度(这里的高度单位为px，所有利用比例将300rpx转换为px)
second_height: res.windowHeight - res.windowWidth / 750 * 300
})
}
})
}
})
第一部分内容，高度是固定的rpx
第二部分内容，高度为小程序窗口剩余部分的高度
/**index.wxss**/
.class_first{
background-color: #666666;
color: #fff;
/* 高度固定300rpx */
height: 300rpx;
}
.class_second{
background: #e5e5e5;
color: #000;
}
当然，想要进行小程序页面高度的计算还可以通过以下两种方案：
1.css方案
我是一个很长的文字
.flod{
//折叠样式
}
.extend{
//展开样式
}
flodFn:function(){
this.setData({
isFold: !this.isFold
});
}
2.动态渲染方案
我是一个很长的文字
我是一个很长的文字
flodFn:function(){
this.setData({
isFold: !this.isFold
});
}
只要按照上面的方法，就可以利用微信小程序页面高度计算让原本空白的部分填满小程序页面了，这样一来用户的使用体验也会更好。还想获取更多相关资料请关注微信小程序商店。
微信小程序轮播图怎么设置高度?
设置微信小程序swiper高度怎么弄
微信小程序swiper高度怎么设置