小程序胶囊

// app.js
App({
  // Appdata: {
  //   height: 0, //胶囊高度
  //   navheight: 0, //导航栏高度
  //   right: 0,
  //   left: 0,
  // },
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 获取胶囊按钮的信息
    let jiaonang = wx.getMenuButtonBoundingClientRect()
    // console.log(jiaonang);
    //  设备信息
    wx.getSystemInfo({
      success: (res) => {
        console.log(res);
        // 导航栏的高度的计算           胶囊距离顶部的距离- 设备的高度 *2 ==胶囊距离上，下的距离    
        this.globalData.navheight = (jiaonang.top - res.statusBarHeight) * 2 + res.statusBarHeight + jiaonang.height
        this.globalData.height = jiaonang.height
        this.globalData.right = res.windowWidth - jiaonang.right
        this.globalData.buttom=jiaonang.top-res.statusBarHeight
      }
    })
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    // userInfo: null,
    height: 0, //胶囊高度
    navheight: 0, //导航栏高度
    right: 0,
    left: 0,
    buttom:0
  }
})

const app = getApp()
Page({

    /**
     * 页面的初始数据
     */
    data: {
        height:app.globalData.height,  //胶囊高度
        navheight:app.globalData.navheight ,   //导航栏高度
        right:app.globalData.right,
        left:0, 
        buttom:app.globalData.buttom
    },
 })

<view class="nav" style="height:{{navheight}}px;background-color: red;">
    <view class="nav-box" style="height:{{height}}px; min-height:{{heigth}}px;bottom:{{buttom}}px;line-height: {{height}}px;margin-top: {{navheight-buttom*2-height}}px;">
        <view class="bbb" style="background:rgb(236, 231, 231);height: {{height}}px;">
            <!-- <view style="height: {{height}}px;background-color: blue;line-height: {{height}}px;"><input type="text" placeholder="12312" class="input"  style="border: 1px solid red;" /></view> -->
            <!-- <view>1</view> -->
            <input type="text" placeholder="12312" class="input"  style="border: 1px solid red;" />
        </view>
        <!-- <view style="background:white;" >13213</view> -->
    </view>
</view>