基于uniapp开发的H5实现动态隐藏导航栏

背景:公司另一个小程序想把我们的H5嵌入到他们小程序中,要隐藏掉导航栏,用他们的导航,我们自己的H5还是要保留导航栏的。

实现
1、增加一个中间页用于处理路由和登录,在onLoad中拿到路由和参数
      //登录也需要处理,这里没有展示
        onLoad(params) {
            console.log(JSON.stringify(params))
            if (params.hideNavBar && params.hideNavBar == '1'){
                //拿到hideNavBar == 1就本地缓存下来
                setNavBarStatus("1")
            }
            //此处应登录后跳转到对应页面
            uni.redirectTo({
                url: "/" + params.redirectUrl
            })
        },
2、在APP.vue的mounted()方法中调用隐藏方法,监听路由跳转时再一次执行隐藏方法
        mounted() {
            this.hideNavBar()
        },
        watch:{
            $route(to, from){
                this.hideNavBar()
            },
        },
        methods:{
            hideNavBar(){
                //判断是H5且调用方要求隐藏导航 getNavBarStatus() == '1'
                /*#ifdef H5*/
                if (getNavBarStatus() == '1'){
                    this.$nextTick(() => {
                        let head = document.getElementsByTagName('uni-page-head')
                        console.log(JSON.stringify(head), "head")
                        if (head[0]){
                            head[0].style.display = 'none'
                        }
                    })
                }
                /*#endif*/
            }
        }
3、注意页面的page.json中的页面不能配置自定义导航栏

如下

{
            "path" : "pages/****/****",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"//不可以配置custom,此时无法隐藏
            }
            
        }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容