小程序胶囊适配

<!-- 背景图 -->
<!-- <image class="img-s" src="{{base_img_url}}home/setting_img.png" mode="widthFix"></image> -->
<view class="custom-heads" style="height:{{capsule.navHeight-40}}px;">
  <view style="height:{{capsule.navObj}}px;margin-top:{{capsule.navTop}}px;padding-right:{{capsule.navObjWid+5}}px;" class="flex-box">
    <view class="header-s">
      <view class="header-ss" bindtap="gobackBtn">
        <image class="head-img" src="https://campaigncdn.herdsric.com/a2/home/go_back.png" mode="widthFix"></image>
      </view>
      <view class="input">
        <view class="input-txts">活动规则</view>
      </view>
    </view>
  </view>
</view>

js

    // 胶囊适配
    capsule: {
      navHeight: '', //导航栏高度
      navTop: '', //导航栏距顶部距离
      navObj: '', //胶囊的高度
      navObjWid: '', //胶囊宽度+距右距离
      navbarHeight: 0,
      navbarTop: 0,
    },


  // 胶囊适配
  initCapsule() {
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    this.globalData.capsule.navbarTop = menuButtonObject.top;
    this.globalData.capsule.navbarHeight = menuButtonObject.height;
    wx.getSystemInfo({
      success: res => {
        //导航高度
        let statusBarHeight = res.statusBarHeight,
        navTop = menuButtonObject.top,
        navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width, // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
        navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
        this.globalData.capsule.navTop = navTop //胶囊距离顶部距离
        this.globalData.capsule.navHeight = navHeight //导航栏总体高度 
        this.globalData.capsule.navObjWid = navObjWid //胶囊宽度(包括右边距离)
        this.globalData.capsule.navObj = menuButtonObject.height //胶囊高度
        // console.log(res, this.globalData.capsule.navTop, '胶囊适配');
      },
      fail(err) {
        console.log(err);
      }
    })
  },