微信小程序按比例分配组件（以View为例）

View组件是比较常用的组件，而且通常是按照一定比例来分配它的大小。

效果图：

就高度而言，

①、可以按照正常的固定数值来分配高度

②、可以按比例分配

③、当然还可以部分固定高度，其它用它剩余的高度。

直接上代码，边看边讲

.wxml文件，我们给它不同部分的高度起个名字section_Up_Height、section_Down_Height：

<!--pages/plan/plan.wxml-->  <view  >   </view>  <view  >   </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.jsPage({   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，学会了~