1. 程式人生 > >微信小程式 簡單獲取螢幕視口高度

微信小程式 簡單獲取螢幕視口高度

由於小程式的寬度是固定的 750rpx,我們可以先用 wx.getSystemInfo 來獲取可使用視窗的寬高(並非rpx),結合750rpx的寬度算出比例,再用比例來算出高度

let that = this;
wx.getSystemInfo({
  success: function (res) {
    let clientHeight = res.windowHeight;
    let clientWidth = res.windowWidth;
    let ratio = 750 / clientWidth;
    let height = clientHeight * ratio;
    that.setData({
      height: height
    });
  }
});

具體剖析一下:

let that = this;
// 獲取系統資訊
wx.getSystemInfo({
  success: function (res) {
    // 獲取可使用視窗寬度
    let clientHeight = res.windowHeight;
    // 獲取可使用視窗高度
    let clientWidth = res.windowWidth;
    // 算出比例
    let ratio = 750 / clientWidth;
    // 算出高度(單位rpx)
    let height = clientHeight * ratio;
    // 設定高度
    that.setData({
      height: height
    });
  }
});

 

關於微信小程式獲取元素高度的文章:《微信小程式 獲取元素高度(獲取元素節點資訊)