uniapp 自定义导航

uniapp 自定义导航

<view class="top-bar" :style="{height:barHeight+'px',paddingTop:paddingTop+'px'}">
自定义导航
</view>

//微信小程序获取胶囊导航的位置
created() {
let paddingTop = MenuButtonBoundingClientRect().top//获取顶部的位置
let barHeight = MenuButtonBoundingClientRect().height;//获取胶囊的高度
}

<style>
.top-bar {
background-color: #00b26a;
color: white;
width: 100%;
text-align: center;
font-weight: bolder;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 20rpx;
}
</style>