uni-app:自定义顶部导航栏(hbuilderx 3.7.3)
App 自定义 导航 uni 顶部 3.7 HBuilderX
2023-09-14 09:01:15 时间
一,代码:
说明:我们使整个顶部导航栏透明,只保留一个退回上一页的按钮
模板
<!-- 自定义导航栏 --> <view class="navBarBox" style="position: fixed;top:0;z-index: 1000;"> <!-- 状态栏占位 --> <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view> <!-- 导航栏内容 --> <view class="navBar" style="height:93rpx;"> <view style="width:93rpx;height:93rpx;margin-left: 20rpx;display: flex; flex-direction: row;justify-content: center;align-items: center;" @click="goBack"> <!-- 返回上一页--> <uni-icons type="back" size="30"></uni-icons> </view> </view> </view>
js:
export default { data() { return {// 状态栏高度 statusBarHeight: 0, // 导航栏高度 navBarHeight: 82+11, } }, onLoad(option) { //获取手机状态栏高度 this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; },
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,查看效果
web:
微信小程序:
三,查看hbuilderx的版本:
![](https://img2023.cnblogs.com/blog/1938691/202302/1938691-20230224142225914-1929024108.png)
相关文章
- 默然后台二开的论坛社区APP源码-星泽V社
- 实例|APICloud AVM框架开发视频会议APP
- 前端开发APP,从HBuilder开始~
- 基于微信小程序云开发(校园许愿墙app)妄想替代学校的表白墙
- 2022最简单易懂的IOS App打包发布完整流程
- Spark App 血缘解析方案
- app自动化测试(Android)--App 控件定位
- 用LearnCloud构建简单app(1)
- App Cleaner & Uninstaller for mac(卸载程序和清理助手)
- 开发好APP了如何上架apple store市场
- HBuilder包装iOS APP上App Store的详细过程
- 实现在windows、linux下上传ios app到App Store
- Android动态化框架App Bundles详解手机开发
- iOS–app自定义相册–从自定义的相册中获取图片详解手机开发
- Oracle 视图 DBA_APP_PDB_STATUS 官方解释,作用,如何使用详细说明
- Linux学习之路,体验移动APP的魅力(linux学习app)
- 构建可靠的安卓 MSSQL APP(安卓 mssql app)
- 高效缓存利器:App Redis快速提升应用程序性能(appredis)
- App无缝连接远程MySQL数据库(app连接远程mysql)
- 使用App连接MySQL数据库快速实现数据分析(app连mysql数据库)
- 拓展业务用App组合MySQL实现跨平台数据共享(app组合mysql)
- App中数据库优势之MySQL(app数据库mysql)
- App与MySQL数据库构建坚固的联系(app和mysql数据库)
- Oracle App驱动的路径探索之旅(oracle app目录)
- Oracle APP究竟有多重(oracle app太大)