微信小程序-让弹框相对屏幕始终居中显示【适配不同屏幕尺寸】

wxml：

 <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="commodity_screen" bindtap="hideModal2" wx:if="{{!flag}}"></view>
    <view class="wx-popup" style="margin:-{{windowHeight/2}}px 0 0 -{{windowWidth/2}}px" hidden="{{flag}}">
      <view class='popup-container'>
        <view class="wx-popup-title">添加备注</view>
        <view class="wx-popup-con">
          <view class="input">
            <input class="inputRemark" name="nickName" value="{{nickName}}" placeholder="请输入备注" bindinput="remarkInput" />
          </view>
        </view> 
        <view class="wx-popup-btn">
          <button class="btn-no" formType="reset" bindtap='hideModal2'>取消</button>
          <button class="btn-no" formType="submit">确认</button>
        </view>
      </view>
    </view>
  </form>

解析：

1、固定屏幕位置居中写法：

            left:50%;top:50%是窗口/屏幕的中心点；

            弹层宽高的一半是其中心点；
            所以margin-top取负的高度/2；margin-left取负的宽度/2；即为相对于窗口/屏幕完全居中。

2、margin设置： -(屏幕实际高度/2) 0 0 -(元素的实际宽度/2);

3、margin模板写法：

style="margin:-{{windowHeight/2}}px 0 0 -{{windowWidth/2}}px"

js：

  目的：获取当前屏幕可见区域的宽和高

Page({
  data: {
    windowWidth: '',
    windowHeight: '',
  },
  onShow: function() {
    //获取系统信息:获取当前屏幕可见区域的宽和高
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          "windowWidth": res.windowWidth, //可使用窗口宽度，单位px
          "windowHeight": res.windowHeight, //可使用窗口高度，单位px
        })
        console.log(res.windowWidth, that.data.windowWidth);
        console.log(res.windowHeight, that.data.windowHeight);
      },
    })
  },
})

解析：

1. wx.getSystemInfo(）准确获取设备系统可使用系统宽度、高度；

欲了解 wx.getSystemInfo(）更多用法，详情可查看小程序开发API官文；

链接：https://developers.weixin.qq.com/miniprogram/dev/dev_wxwork/dev-doc/qywx-api/foundation/wxgetsysteminfo.html

wxss:

如下给出核心样式，可供参考；完全参考也行，加群私信艾特我，给宁源码样式；群号【708072830】，一起交流学习

.wx-popup {
  position: fixed;
  z-index: 2000;
}

.popup-container {
  position:fixed;
  left: 50%;
  top: 50%;
  width: 80%;
  max-width: 600rpx;
  background: #fff;
  z-index: 2000;

}

注意：

看了此篇务必对比下篇，同样是适用不同屏幕尺寸进行水平垂直居中，但很多小伙伴都会出现个误区，就是会将tranlate（）函数，叠加到设置margin方法中，其实效果一样，但是这对于需求来说，就是两种方式！不信，欢迎大家踊跃尝试；

<-戳-它->   https://blog.csdn.net/weixin_43970743/article/details/104970129

实际效果如下：

iPhone5 

iPhone6/7/8 

 iPhone6/7/8 plus

 其余就不一一截图展示了哈。

❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ

❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～

❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】

❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。