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;
}
网友评论