uniapp 自定义标题情况下,让标题和右侧胶囊对齐

实现效果:无论手机类型怎么切换,自定义标题始终跟胶囊平齐

实现:

在pages.json文件中配置标题自定义

在index.vue页面,编写自定义的标题内容,在onLoad里可以计算高度,

<view class="title" :style="{paddingTop:navBarTop + 'px',height:navBarHeight + 'px',lineHeight:navBarHeight + 'px'}">答题小程序</view>
onLoad() {
         let statuBar = uni.getSystemInfoSync().statusBarHeight;
         let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
         console.log(menuButtonInfo)
             this.navBarTop = menuButtonInfo.top;
             this.navBarHeight = menuButtonInfo.height;
        },

有关什么是小程序状态栏,标题栏,胶囊,下面的文章有标识

小程序页面结构,以及相应部分怎么获取其参数


版权声明:本文为qq_43468165原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。