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

沙振宇 2018-03-14 10:36:30

6649

分类专栏： //Web 文章标签：微信小程序比例分配高度 View

最后发布:2018-03-14 10:36:30首次发布:2018-03-14 10:36:30

本文链接：https://blog.csdn.net/u014597198/article/details/79550943

版权

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，学会了~