school_meal_wxapp/components/l-container/index.js

// components/l-nav-bar/index.js
const app = getApp();
Component({
  attached () { this._init(); this.dom() },
  pageLifetimes: { show () { this._init(), this.dom(); } },
  /**
   * 组件的属性列表
   */
  properties: {
    // nav-bar
    title: { type: String, value: "" },
    fixed: { type: Boolean, value: true },
    back: { type: Boolean, value: true },
    bgc: { type: Boolean, value: false },
    // tabber
    tabber: { type: Boolean, value: false },
    active: { type: Number, value: 0 },
  },

  /**
   * 组件的初始数据
   */
  data: {
    // container margin-top 
    MarginTop: 0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 定义调用组件的js方法
    _init () {
      wx.lxd = wx.lxd || {}, wx.lxd.Ctr = e => {
        // tabber
        const { tabber } = app.globalData;
        this.setData({
          //  app.js 固定定义
          // tabber
          ...tabber,
          // 页面传参
          ...e,
        })
      }
    },
    // nav事件
    NavSuccess () {
      wx.navigateBack({
        delta: 1
      })
    },
    //tabber 跳转事件
    TabberSuccess (event) {
      let { detail } = event;
      let { tabberlist } = this.data;
      wx.redirectTo({
        url: tabberlist[detail]["url"],
      })
    },
    //container margin-top 计算
    dom () {
      // 获取状态栏的高度
      const { statusBarHeight } = wx.getSystemInfoSync();
      // 获取右上角菜单的位置尺寸
      const menuButtonObject = wx.getMenuButtonBoundingClientRect();
      const { top, height } = menuButtonObject;
      // 计算导航栏的高度
      // let navBarHeight=height+(top-statusBarHeight)*2;
      let navBarHeight = height + top - statusBarHeight + 6;
      // 计算状态栏与导航栏的总高度
      const Height = statusBarHeight + navBarHeight;
      // 计算容器距离顶部距离
      const MarginTop = Height;
      this.setData({
        MarginTop
      })
    }
  }
})