Button无法充满屏幕
解决办法:将width=100%当作行内样式写到button上
图片自适应屏幕高度
<view class="cons">
<image src="../images/logins.png" style="width:100%;height:100%;" mode='aspectFill'></image>
</view>
.cons{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
背景图片自适应屏幕高度
<view class="body">
<view class="button-wrap">
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" bindtap="getUserProfile" class="wx" style="width: 88%;">微信一键报名</button>
<button class="phone" bindtap="gobm" style="width: 88%;">手机一键报名</button>
</view>
</view>
.body{
height: 100vh;
width: 100vw;
min-height: 100vh;
background-size: 100vw 100vh;
background-image: url(必须使用网络图片地址);
background-repeat: no-repeat;
position: relative;
}
.button-wrap{
width: 100%;
position: absolute;
left: 0;
bottom: 75px;
}
.wx,.phone{
font-size: 19px;
letter-spacing: 3px;
border-radius: 5px;
padding: 15px 0;
}
.wx{
background-color: #3643bd;
box-shadow: 0px 18px 17px 0px
rgba(89, 119, 203, 0.25);
color: #fff;
margin-bottom: 18px;
}
.phone{
background-color: #ffffff;
box-shadow: 0px 13px 17px 0px
rgba(89, 119, 203, 0.08);
border: solid 1px #ffffff;
color: #5765c7;
}
图片高度自适应
给图片添加mode的widthFix属性
<view class="top"><image src="../images/top.png" mode="widthFix"></image></view>
developers.weixin.qq.com/miniprogram…