微信小程序遇到的问题

182 阅读1分钟

Button无法充满屏幕

image.png

解决办法:将width=100%当作行内样式写到button上

image.png

图片自适应屏幕高度

<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;
}

image.png

背景图片自适应屏幕高度

<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;
}

image.png

图片高度自适应

给图片添加mode的widthFix属性

<view class="top"><image src="../images/top.png" mode="widthFix"></image></view>

developers.weixin.qq.com/miniprogram…

image.png