小程序跳转样式布局错乱_微信小程序页面布局问题
小程序跳转样式布局错乱_微信小程序页面布局问题
头部和尾部固定，中间内容不固定，实现的效果为当页面第二部分内容较少时三个部分刚好占满屏幕，当内容较多时第二步分高度自适应，第三部分紧跟第二部分
wxm文件中的高度在读取到的数据较多时是如何判断的呢？
index.wxml
第一部分内容，高度是固定的rpx
第二部分内容，内容较少时占用剩下屏幕填充整个高度，内容较多时出现滚动条 第二部分内
第三部分内容，高度是固定的rpx,紧跟第二部分
index.wxss
.class_first {
background-color: #666;
color: #fff;
/高度固定300rpx/
height: 300rpx;
}
.class_second {
background: #e5e5e5;
color: #000;
}
.class_third {
background-color: rgba(241, 238, 12, 0.918);
color: #fff;
/高度固定200rpx/
height: 200rpx;
}
index.js
Page({
data: {
second_height: 0
},
onLoad: function(options) {
let 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 * 500
})
}
})
}
})