微信小程序自定义内容和胶囊对齐

 

原理是：导航栏+胶囊的高度

另一篇简单的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>