uniapp 自定义导航

最新推荐文章于 2024-03-12 17:19:47 发布

城永

最新推荐文章于 2024-03-12 17:19:47 发布

阅读量123

点赞数 1

文章标签： uni-app 微信小程序小程序 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47133092/article/details/129279768

版权

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

//微信小程序获取胶囊导航的位置
created() {
let paddingTop = uni.getMenuButtonBoundingClientRect().top//获取顶部的位置
let barHeight = uni.getMenuButtonBoundingClientRect().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>