View组件是比较常用的组件,而且通常是按照一定比例来分配它的大小。
效果图:
就高度而言,
①、可以按照正常的固定数值来分配高度
②、可以按比例分配
③、当然还可以部分固定高度,其它用它剩余的高度。
直接上代码,边看边讲
.wxml文件,我们给它不同部分的高度起个名字section_Up_Height、section_Down_Height:
<!--pages/plan/plan.wxml-->
<view class="section_Up" style="height:{{section_Up_Height}}px;flex-direction:row;">
</view>
<view class="section_Down" style="height:{{section_Down_Height}}px;flex-direction:row;">
</view>
这里我们为了好区分,用颜色来区分,调整.wxss文件:
/* pages/plan/plan.wxss */
.section_Up {
background-color: rgb(225, 218, 211);
}
.section_Down {
background-color: rgb(238, 236, 232);
}
最后是.js文件,这里完成我们的逻辑,比如按比例分配:
// pages/plan/plan.js
Page({
onLoad:function(){
var that = this;
wx.getSystemInfo({
success: function (res) {
console.log(res);
that.setData({
section_Up_Height: res.windowHeight / 568 * 90,
section_Down_Height: res.windowHeight - res.windowHeight / 568 * 90
})
}
})
}
})
Ok,学会了~