小程序调起支付时样式错乱怎么办?

IT人倩利 阅读 2

我在做微信小程序的支付页面,调用 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;
}

有人遇到过类似情况吗?是不是得加什么隔离样式?

我来解答 赞 3 收藏
二维码
手机扫码查看
1 条解答
 ___彦会
这问题大概率是支付中间页出现时触发了页面重新布局,导致 rpx 计算出错。给你的按钮加上固定定位和底边距:

.pay-btn {
position: fixed; bottom: calc(20rpx + env(safe-area-inset-bottom));
left: 5%;
width: 90%;
height: 80rpx;
/ 其他样式保持不变 /
}

或者更简单——给按钮父容器加个 min-height 和 overflow: hidden 先顶一下。
点赞
2026-03-10 19:02