the head and tail are fixed, and the middle content is not fixed. The effect is that when the content of the second part of the page is less, the three parts just occupy the screen. When there is more content, the second step is highly adaptive, and the third part is closely followed by the second part
. How do you judge the height in thewxm file when you read a lot of data?
index.wxml
< view class= "class_first" >
the first part of the content, the height is a fixed rpx
< / view >
< view class= "class_second" style= "height: {{second_height}} px" >
the second part of the content, less content occupies the rest of the screen to fill the entire height, when there is more content, it appears in the second part of the scroll bar
< / view >
< view class= "class_third" >
the third part of the content, the height is fixed rpx, follows the second part
< / view >
index.wxss
.class _ first {
background-color:-sharp666;
color:-sharpfff;
/ highly fixed 300rpx /
height: 300rpx;
}
.class _ second {
background:-sharpe5e5e5;
color:-sharp000;
}
.class _ third {
background-color: rgba (241,238,12,0.918);
color:-sharpfff;
/ highly fixed 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 = - firstpx300rpxpx
second_height: res.windowHeight - res.windowWidth / 750 * 500
})
}
})}
})