計算高度：

使用computed進行頂部模塊的計算。

總高度：bartotalHeight

log 介紹--收款碼這一條目? 也就是上一章節的title的高度計算???? bodybarheight。

在該組件中：

js部分的代碼：

包含了導出的名字： shop-headbar

子級獲取父級傳來的值：使用 props 函數，這里要寫變量類型和默認值

格式:

??? //子級 獲取父級傳遞來的值
??????? props: {
??????????? foldState: {
??????????????? type: Boolean,
??????????????? defaultValue: false //true將客服和后臺 不顯示
??????????? }
??????? },

計算使用是：computed? 計算接口

另外還包含一個onload，在組件中的onload，需要使用mounted獲取頁面的高度屬性。

然后把這里結算的 總高度給 頁面的父級（最外層）：

<view class="headr" :style="{ height: barTotalHeight + 'px'}">
??????? <!-- style? 這里加樣式，是因為css中的style 應用不了 計算的變量結果 -->
??????? <!-- 自定義頭部 -->

把這里計算的body高度給title 就是介紹那一欄：

??? <!-- logo 店名 一句話介紹+付款碼 -->
??????????? <view class="body" :class="foldState ? 'flod':''" :style="{ height: bodyBarHeight + 'px'}">

把狀態欄給頁面的狀態view：

<view class="statusBar" :style="{ height: iStatusBarHeight + 'px'}"></view>
??????????? <!-- style? 這里加樣式，是因為css中的style 應用不了 計算的變量結果 -->

把膠囊高度給 客服和后臺管理：

<!-- 服務藍 耳機+后臺 -->
??????????? <view class="titleBar" :style="{ height: titleBarheight + 'px'}" v-if="!foldState">