微信小程序按比例分配组件(以View为例)

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

©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页