flex+rpx布局+高度自适应（当屏幕分辨率改变，页面自适应分辨率的高度（不会出现滚动条））

1、flex和rpx的布局这里不做赘述(这里的rpx源于网页应用中的rem，是一个意思)，可以直接下载代码体验效果
****这个效果是建立在会rpx自适应布局的基础上，很简单的~~~~~~~~~~~~
2、先看效果图（在不同的分辨下，布局都能自适应）

20190808_125022.gif

3、做到高度的自适应需获取不同屏幕的可用窗口的高度，即windowHeight这个属性值（切记该值并非是屏幕分辨率的高（screenHeight））,这两个属性值源于接口wx.getSystemInfo()，具体做法可在js中书写，然后渲染到页面，如下:

 onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        console.log("屏幕的高度："+clientHeight)
        var calc = clientHeight * rpxR;
        //console.log(calc)
        that.setData({
          winHeight: calc
        });
      }
    })
  },

这样做的话相当于每个页面都要写一份，也可在app.js中做缓存设置，在后续页面调用即可，如这样做的话需要自己可用窗口的概念很清楚，如果自己设置了tabBar时，该可用窗口的高度会改变，计算公式如下：

可用窗口（windowHeight）的高度=屏幕分辨率的高度（screenHeight）-导航栏的高度（tabBar）-导航栏高度-状态栏高度（一般为20px的绝对像素）

如果没有设置导航栏，则计算如下:

可用窗口（windowHeight）的高度=屏幕分辨率的高度（screenHeight）-导航栏高度-状态栏高度（一般为20px的绝对像素）

4、如效果图中所示，该页面中有四个盒子模型，其计算方式如下：（建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。）
四个盒子模型的高度均在页面渲染的过程中通过内联的方式，引入高度值，权重是较高的，（css权重）

第一个
style='height:{{winHeight*80/1206}}rpx
    这里的80rpx是指40个绝对像素，1206是iphon6的可用窗口高度（不含tabBar）,该比例实则一个比例值，大意就是告诉不同的设备，麻烦你交出你的第一滴血（windowHeight），然后按照我的比例值自由伸缩一下吧（我不是污妖王哦）
第二个，第三个，第四个都一样
style='height:{{winHeight*336/1206}}rpx'

5、四个盒子里的标签高度值则可采用比例值即可
6、上代码，代码较为简单，所以不做注释，毕竟是渣渣哈哈
wxml代码：


<view class='header' style='height:{{winHeight*80/1206}}rpx'>
   <view class='common' bindtap='money'>
     <view class='money'>dfdf</view>
     <view class='icon'></view>
   </view>
   <view class='common' bindtap='loanLimit'>
     <view class='loanLimit'>fdfd</view>
     <view class=' icon'></view>
   </view>
   <view class='common'bindtap='order'>
     <view class='order'>dfdfd</view>
     <view class=' icon'></view>
   </view>
</view>
<view class='section'>
   <view class='commonSection' style='height:{{winHeight*336/1206}}rpx'>
     <view class=' title' >
       <p class='font'>fdgdfgfdgdfg</p>
     </view>
     <view class='content'>
       <view class='column1'>
         <view class='fontCleft'>3dfdsfdsf</view>
         <view class='fontCright1'>dfdsfdsfds</view>
       </view>
       <view class='column2'>
         <view class='fontCright2'>fdfsdf：10min</view>
         <view class='fontCright3'>dsfsdf：0.6%/月</view>
         <view class='fontCright3'>sdfdsf：12个月</view>
       </view>
     </view>
     <view class='tail'>
       <button size='mini' class='button'>dsfsdf</button>
     </view>
   </view>


   <view class='commonSection' style='height:{{winHeight*336/1206}}rpx'>
     <view class=' title'>
       <p class='font'>sdfsdf</p>
     </view>
     <view class='content'>
       <view class='column1'>
         <view class='fontCleft'>sdfdsf</view>
         <view class='fontCright1'>sdfdsfds</view>
       </view>
       <view class='column2'>
         <view class='fontCright2'>sdfdfd</view>
         <view class='fontCright3'>dfdsf</view>
         <view class='fontCright3'>dsfdsf</view>
       </view>
     </view>
     <view class='tail'>
       <button size='mini' class='button'>dfds</button>
     </view>
   </view>


   <view class='commonSection' style='height:{{winHeight*336/1206}}rpx'>
     <view class=' title'>
       <p class='font'>dsfdsf</p>
     </view>
     <view class='content'>
       <view class='column1'>
         <view class='fontCleft'>dfdsfd</view>
         <view class='fontCright1'>dfdsfds</view>
       </view>
       <view class='column2'>
         <view class='fontCright2'>dfdsfds</view>
         <view class='fontCright3'>dsfdf</view>
         <view class='fontCright3'>dfdfd</view>
       </view>
     </view>
     <view class='tail'>
       <button size='mini' class='button'>dfdfd</button>
     </view>
   </view>


   
</view>
<view class='footer'>

</view>

js代码:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../baiduMap/baiduMap'
    })
  },
  onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        console.log("屏幕的高度："+clientHeight)
        var calc = clientHeight * rpxR;
        //console.log(calc)
        that.setData({
          winHeight: calc
        });
      }
    })
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

wxss代码：

/* pages/borrowMoney/borrowMoney.wxss */
page {
  background-color:#f4f4f4;
}
.header {
  margin-top: 1rpx;
  width:100%;
  background-color:white;
  display:flex;
  font-size:28rpx;
  font-weight: bold;
  
}
.common{
  flex:1;
  display:flex;
  cursor: pointer;
}
.loanLimit,.money,.order{
  flex:2;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  
}
.icon {
  flex:1;
  line-height: 80rpx;
}
.commonSection {
  margin:0 auto;
  margin-top: 20rpx;
  width:90%;
  height:336rpx;
  background-color:#f4f4f4;
  border-radius: 10rpx;
  box-shadow: 0 0 50rpx #b7b7cc;
}
.title {
  /*height:80rpx;*/
  height:25%;
  padding-left: 40rpx;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background-color:white;
  border-top-left-radius:10rpx; 
  border-top-right-radius: 10rpx;
}
.font{
  font-size: 24rpx;
  font-weight: bold;
}
.content {
  margin-top:4rpx;
  width:100%;
  height:44%;
  display:flex;
}
.column1,.column2 {
  flex:1;
  background-color:white;
}
.column1 {
  text-align: center;
}
.column2{
  margin-left:4rpx;

}
.fontCleft {
  font-size: 28rpx;
  margin-top: 14%;
  font-weight: bolder;
}
.fontCright1,.fontCright2,.fontCright3 {
  font-size:12px;
  height:20%;
  margin-left: 4%;
  color:#a1a1a1;
}
.fontCright2 {
  margin-top:14%;
}
.tail {
  width:100%;
  background-color:white;
  height:31%;
  border-bottom-left-radius:10rpx; 
  border-bottom-right-radius: 10rpx;
  text-align:right;
}
.button {
  background-color:green;
  width:30%;
  height:56%;
  font-size:26rpx;
  color:white;
  margin-right: 124rpx;
 
}
.button:active {
  background-color:aqua;
}