uniapp 自定义导航

最新推荐文章于 2024-06-08 17:00:18 发布

城永

最新推荐文章于 2024-06-08 17:00:18 发布

阅读量137

点赞数 1

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

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

版权

该文章介绍了如何在微信小程序中创建自定义导航条，通过uni.getMenuButtonBoundingClientRect()方法获取胶囊导航的位置，包括顶部距离和高度，然后设置样式以实现自定义布局。代码示例展示了如何在页面创建和样式化top-bar。

摘要由CSDN通过智能技术生成

<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>