微信小程序自定義內容和膠囊對齊

 

原理是：導航欄+膠囊的高度

另一篇簡單的https://www.cnblogs.com/lude1994/p/14406630.html 

 

1.在app.js中

　　

globalData: {
        statusBarHeight:wx.getSystemInfoSync()['statusBarHeight'], // 獲取導航欄的高度
}

2.在需要使用的頁面中js中賦值

data: {
        jiaonangHeight: 32,  // data中定義
　　　　　statusBarHeight:getApp().globalData.statusBarHeight // 導航欄的高度

}

onReady: function () {
    var that = this;
    wx.getMenuButtonBoundingClientRect(  //獲取膠囊的干度及其他參數
      {
          success: e => {
            that.data.jiaonangHeight = e.height
          }
        }
    )
}

 

3.在頁面中使用，為保持真正的對齊，我添加了導航欄的高度

<view>
    <view style='padding: {{jiaonangHeight}}px;'></view> <view> 內容 </view> </view>