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

青旅半醒 2023-07-15 13:18 15阅读 0赞

### wxml： ###

解析：

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][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方法中，其实效果一样，但是这对于需求来说，就是两种方式！不信，欢迎大家踊跃尝试；][tranlate_margin]
> 
> <-戳-它->   [https://blog.csdn.net/weixin\_43970743/article/details/104970129][tranlate_margin]

实际效果如下：

iPhone5

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70][]

iPhone6/7/8

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70 1][]

iPhone6/7/8 plus

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70 2][]

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

> ❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
> 
> ❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～
> 
> ❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】
> 
> ❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。

[https_developers.weixin.qq.com_miniprogram_dev_dev_wxwork_dev-doc_qywx-api_foundation_wxgetsysteminfo.html]: https://developers.weixin.qq.com/miniprogram/dev/dev_wxwork/dev-doc/qywx-api/foundation/wxgetsysteminfo.html
[tranlate_margin]: https://blog.csdn.net/weixin_43970743/article/details/104970129
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70]: /images/20230528/64e62cc03cf947a993ae39c5c0869634.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70 1]: /images/20230528/b008beda47b94fc29f1d198c72761c6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70 2]: /images/20230528/e4adf474e4f344499ff3da13d8ba282b.png