阅读量:0
微信小程序自定义顶部导航栏,动态适配包括胶囊
<view> <uni-nav-bar :height="totalHeight" backgroundColor="#FFC003" leftWidth="100%"> <block slot="left"> <view> <view class="navTitle"> 哈哈哈 </view> </view> </block> </uni-nav-bar> </view> menu: [], statusBarHeight: 0, //状态栏的高度 navigatorHeight: 0, //导航栏高度 menuHeight: 0, //胶囊高度 menuTop: 0, //胶囊与顶部的距离 totalHeight: 0, //总高度 onShow() { // 获取系统信息 uni.getSystemInfo({ success: res => { this.system = res; this.statusBarHeight = this.system.statusBarHeight; // 状态栏高度 this.calculateNavBarHeight() } }); }, methods：{ calculateNavBarHeight() { // 获取胶囊信息 this.menu = uni.getMenuButtonBoundingClientRect(); // 计算组件高度 this.menuHeight = this.menu.height; // 胶囊高度 this.menuTop = this.menu.top; // 胶囊与顶部的距离 // 导航栏高度= （胶囊顶部距离-状态栏高度） x 2 + 胶囊的高度 this.navigatorHeight = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height; // 总高度 = 状态栏的高度 + 导航栏高度 this.totalHeight = this.statusBarHeight + this.navigatorHeight; }, } .navTitle { padding-left: 36rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 36rpx; color: #000000; margin-bottom: 10rpx; } 