微信小程序,app端自定义导航栏动态设置高度

第一种方法:

定义:


<script>
    import Vue from 'vue'
    export default {
        onLaunch: function() {
            uni.getSystemInfo({
                success: function(e) {
                    // #ifndef MP
                    Vue.prototype.StatusBar = e.statusBarHeight;
                    if (e.platform == 'android') {
                        Vue.prototype.CustomBar = e.statusBarHeight + 50;
                    } else {
                        Vue.prototype.CustomBar = e.statusBarHeight + 45;
                    };
                    // #endif

                    // #ifdef MP-WEIXIN || MP-QQ
                    Vue.prototype.StatusBar = e.statusBarHeight;
                    let capsule = wx.getMenuButtonBoundingClientRect();
                    if (capsule) {
                        Vue.prototype.Custom = capsule;
                        // Vue.prototype.capsuleSafe = uni.upx2px(750) - capsule.left + uni.upx2px(750) - capsule.right;
                        Vue.prototype.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
                    } else {
                        Vue.prototype.CustomBar = e.statusBarHeight + 50;
                    }
                    // #endif        

                    // #ifdef MP-ALIPAY
                    Vue.prototype.StatusBar = e.statusBarHeight;
                    Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
                    // #endif
                }
            })
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

<style>
    /* 引入colorUI css */
    @import "colorui/main.css";
    @import "colorui/icon.css";
    /*每个页面公共css */

    page {}
</style>

//使用


<template>
    <view>
        <view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
            <view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
                <view class="action" @tap="BackPage" v-if="isBack">
                    <text class="cuIcon-back"></text>
                    <slot name="backText"></slot>
                </view>
                <view class="content" :style="[{top:StatusBar + 'px'}]">
                    <slot name="content"></slot>
                </view>
                <slot name="right"></slot>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                StatusBar: this.StatusBar,
                CustomBar: this.CustomBar
            };
        },
        name: 'cu-custom',
        computed: {
            style() {
                var StatusBar= this.StatusBar;
                var CustomBar= this.CustomBar;
                var bgImage = this.bgImage;
                var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
                if (this.bgImage) {
                    style = `${style}background-image:url(${bgImage});`;
                }
                return style
            }
        },
        props: {
            bgColor: {
                type: String,
                default: ''
            },
            isBack: {
                type: [Boolean, String],
                default: false
            },
            bgImage: {
                type: String,
                default: ''
            },
            backPagePath: {
                type: String,
                default: ''
            }
        },
        methods: {
            BackPage() {
                if(this.backPagePath) {
                    uni.redirectTo({
                        url: this.backPagePath
                    });
                } else {
                    uni.navigateBack({
                        delta: 1
                    });
                }
            }
        }
    }
</script>

<style>

</style>

第二种方法

<!-- 顶部组件 -->
        <u-navbar :is-back="false" :background="searchBarBg" :border-bottom="false" id="nav-bar">
            <view class="top u-flex">
                <image src="../../../static/navi_title_v6.png" class="mini-logo"></image>
                <view class="search-box u-flex" :style="{ height: menuHeight + 'px' }" @click="search()">
                    <image src="../../../static/icon/search.png"></image>

<!--搜索框中的词动画效果-->
                    <swiper :indicator-dots="false" autoplay :interval="3000" :duration="200" vertical circular>
                        <swiper-item class="u-flex" v-for="(item, index) in searchHotWords" :key="index">
                            <text>{{ item.queryName }}</text>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </u-navbar>


<script>

// #ifndef H5
let menuInfo = uni.getMenuButtonBoundingClientRect()
// #endif

data(){

return{

// #ifndef H5
  menuHeight: menuInfo.height
   // #endif

}

}

</script>

导航栏下的tab栏，动态获取与上面的距离

<!-- tab栏 -->
        <view class="tabs" :style="{ top: navBarHeight + 'px' }" id="tabs">
            <u-tabs
                :list="tabList"
                :is-scroll="false"
                :current="tabCurrent"
                :duration="0.2"
                :gutter="80"
                
                name="title"
                font-size="32"
                bg-color="#f2b739"
                active-color="#fff"
                inactive-color="#fcf4e2"
                :bar-style="{ height: '8rpx' }"
                @change="changeTabs"
            ></u-tabs>
        </view>

data(){

return{

navBarHeight: 0,

}

}

methods:{

getViewHeight() {  //动态获取
            uni.createSelectorQuery()
                .in(this)
                .select('#nav-bar')
                .boundingClientRect(data => {
                    this.navBarHeight = data.height
                    uni.createSelectorQuery()
                        .in(this)
                        .select('#tabs')
                        .boundingClientRect(data => {
                            this.tabsHeight = data.height
                            uni.getSystemInfo({
                                success: res => {
                                    this.loadingHeight = res.windowHeight - this.navBarHeight - this.tabsHeight
                                }
                            })
                        })
                        .exec()
                })
                .exec()
        },

}