小程序调起支付时样式错乱怎么办?
我在做微信小程序的支付页面,调用 wx.requestPayment 之后,页面底部的确认按钮突然变宽了,布局完全乱掉。明明之前在普通页面显示正常,一进支付流程就出问题。
我试过检查 z-index 和 position,也清过缓存,但没用。是不是支付弹窗影响了页面的 CSS 渲染?下面是我按钮的样式:
.pay-btn {
width: 90%;
max-width: 600rpx;
height: 80rpx;
background: #07c160;
border-radius: 40rpx;
color: white;
font-size: 32rpx;
display: block;
margin: 0 auto;
}
有人遇到过类似情况吗?是不是得加什么隔离样式?
.pay-btn {
position: fixed; bottom: calc(20rpx + env(safe-area-inset-bottom));
left: 5%;
width: 90%;
height: 80rpx;
/ 其他样式保持不变 /
}
或者更简单——给按钮父容器加个 min-height 和 overflow: hidden 先顶一下。