uniapp-商城-25-顶部模块高度计算

计算高度：

使用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">