微信小程序-讓彈框相對屏幕始終居中顯示【適配不同屏幕尺寸】

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】

❤鑑於個人經驗有限，所有觀點及技術研點，如有異議，請直接回復討論（請勿發表攻擊言論）。