微信小程序实现原生导航栏和自定义头部导航栏
原生导航栏:
可以在 app.json
的 window 属性中或页面的 JSON 文件中设置 navigationBarTitleText(导航栏标题内容)、navigationBarTextStyle(导航栏标题颜色)、navigationBarBackgroundColor(导航栏背景色)。
自定义头部导航栏:
因为不同的手机型号头部导航栏高度可能不一致,所以为了适配更多型号,需要动态计算导航栏的高度。
状态栏高度可以通过 wx.getSystemInfo()获取;
胶囊信息可以通过 wx.getMenuButtonBoundingClientRect() 获取;
所以导航栏高度=状态栏高度+胶囊按钮的高度+(胶囊按钮距离顶部的距离-状态栏的高度)*2;
实现方法:
- 新建 navbar 组件。
// navbar.wxml // 设置导航栏的高度等于实际获取的导航栏高度;设置返回箭头、文字所在 view 的高度等于胶囊按钮的高度,距离顶部的距离等于胶囊按钮距离顶部的距离,然后设置返回箭头、文字垂直居中 <view class="navbar" style="background:{{background}};height:{{navbarHeight}}px"><view style="height:{{capsuleHeight}}px;top:{{capsuleTop}}px;" class="arrow-content"><view class="arrow" wx:if="{{isSowArrow}}" bindtap="handleGoToBack"></view></view><view class="text" style="height:{{capsuleHeight}}px;top:{{capsuleTop}}px">{{title}}</view> </view>
//navbar.wxss .navbar{width: 100%;//设置导航栏固定在顶部position: fixed;top: 0;z-index: 99; } .arrow-content{position: absolute;left: 40rpx;z-index: 999;display: flex;align-items: center; } .arrow{width: 20rpx;height: 20rpx;border: 5rpx solid #FFFFFF;border-right-color:transparent;border-bottom-color:transparent;transform: rotate(-45deg); } .text{position: absolute;left: 0;right: 0;font-size: 28rpx;color: #FFFFFF;display: flex;align-items: center;justify-content: center; }
// navbar.js // 获取应用实例 const App = getApp(); Component({properties: {title:{type: String,value: '新视界'},background:{type: String,value: 'linear-gradient(to right,#FF3413,#FF924D)'},isSowArrow:{type: Boolean,value: true}},data:{capsuleTop: '', //胶囊距离屏幕顶部的距离capsuleHeight: '', //胶囊高度navbarHeight: '' //导航栏高度},lifetimes: {attached: function () {this.setData({capsuleTop: App.globalData.capsule.top, capsuleHeight: App.globalData.capsule.height, navbarHeight: (App.globalData.capsule.top - App.globalData.system.statusBarHeight) * 2 + App.globalData.capsule.height + App.globalData.system.statusBarHeight, })}},methods: {handleGoToBack(){wx.navigateBack({delta: 1})}} })
//app.js App({globalData: {system: '',capsule: ''},onLaunch: function () {// 在 app.js 中全局获取一次系统和胶囊信息// 获取系统信息wx.getSystemInfo({success: res => {this.globalData.system = res}})// 获取胶囊信息this.globalData.capsule = wx.getMenuButtonBoundingClientRect()} })
想要改变右上角胶囊按钮的颜色,可以在
app.json
中设置 window 的属性。navigationBarTextStyle - 在要使用自定义导航栏的页面的 JSON 文件中设置
"navigationStyle": "custom"
,导航栏将会只保留右上角的胶囊按钮,此时再往屏幕中加元素,将会直接顶到屏幕顶端。{"navigationStyle": "custom","usingComponents": {"navbar": "/components/navbar/navbar",} }
- 在要使用自定义导航栏的页面 WXML 文件中使用即可。
<navbar background="linear-gradient(to right, #0064FF , #33A9FF)"></navbar>
微信小程序实现原生导航栏和自定义头部导航栏相关推荐
- 微信小程序从零开始开发步骤(三)底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...
- c++小程序代码_# 微信小程序的原生框架和taro对比 ##
微信小程序的原生框架和taro对比 小程序历史(为什么会出现?) 2007年 iPhone H5 大家知道现在手机端主要是iOS.Android两大系统,实际上在早期有3大系统竞争,还有一个就是诺基亚 ...
- 微信小程序/网页/app/android等各种bar图标导航图标文章图标标题图标下拉/检索收藏上传客服等图标整理
在做微信小程序的时候,需要给底部放置图标.但是找了好久都没有找到自己想要的,适合的.后来我就把所有的小程序的图标都看了下.后来想想还是整理出来,方便自己以后用,也方便大家一下.我敢保证有你想要的,适合 ...
- 微信小程序生态13-微信公众号自定义菜单、个性化菜单配置
文章导航 微信小程序生态1-初识小程序 微信小程序生态2-创建一个微信小程序 微信小程序生态3-微信小程序登录流程设计 微信小程序生态4-扫普通二维码进入小程序.打开短链接进入小程序 微信小程序生态5 ...
- 云开发表情包制作神器微信小程序源码下载,支持各种自定义
该款小程序是一个表情包制作 内容毕竟丰富,另外自定义制作方面也是特别的自由 支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择 这是一款云开发的小程序,但是安装还是挺简单的 搭建教程: 首先使 ...
- 【小程序源码】云开发表情包制作神器微信小程序源码下载,支持各种自定义
该款小程序是一个表情包制作 内容毕竟丰富,另外自定义制作方面也是特别的自由 支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择 这是一款云开发的小程序,但是安装还是挺简单的 搭建教程: 首先使 ...
- (已更新)谁是卧底线下发牌器微信小程序源码下载,强大的自定义功能
看名字就知道啦,这是一个谁是卧底的小程序源码 游戏规则: 谁是卧底是一款线下聚会的游戏,考验口才和脑力的同时,也能活跃气氛. 游戏人数为4-12人,游戏角色包括平民,卧底,白板可供用户选择! 游戏步骤 ...
- 谁是卧底线下发牌器微信小程序源码下载,强大的自定义功能
看名字就知道啦,这是一个谁是卧底的小程序源码 游戏规则: 谁是卧底是一款线下聚会的游戏,考验口才和脑力的同时,也能活跃气氛. 游戏人数为4-12人,游戏角色包括平民,卧底,白板可供用户选择! 游戏步骤 ...
- 【小程序源码】谁是卧底线下发牌器微信小程序源码下载,强大的自定义功能
看名字就知道啦,这是一个谁是卧底的小程序源码 游戏规则: 谁是卧底是一款线下聚会的游戏,考验口才和脑力的同时,也能活跃气氛. 游戏人数为4-12人,游戏角色包括平民,卧底,白板可供用户选择! 游戏步骤 ...
最新文章
- 自学python推荐书籍2019-2019最全Python入门学习路线,不是我吹,绝对是最全
- 协同过滤:基于用户的协同过滤itemCF
- 联机装箱问题 java_Java实现 洛谷 P1049 装箱问题
- Gensim初步使用和详细解释(该代码只能处理英文,处理中文不可用该代码)
- matlab里数据类型转换,Matlab数据类型及转换(Matlab data type and conversion).doc
- 【C++】考虑virtual函数以外的其他选择
- 程序员面试100题之十六:二叉树中两个节点的最近公共父节点(最低的二叉树共同祖先)
- 数据科学 IPython 笔记本 8.9 自定义图例
- Vue 动画的封装
- 计算机主机插线安装驱动程序,刻字机usb驱动设置及使用方法-刻字机USB 接口安装及使用说明...
- NeatUpload 的使用
- krohne流量计接线图_科隆电磁流量计转换器操作说明
- Android基于Ymodem协议升级嵌入式MCU主控
- Windows电脑系统上不错的五款优化软件
- 《计算机网络》在物理层和数据链路层扩展以太网
- 【信息检索导论】第一章 布尔检索
- 强势崛起!这所年轻大学南科大,是中国高教的奇迹!
- tensorflow函数学习
- 通过GitHub静态网页托管,十分钟制作一份精美的在线网页简历
- ios airplay mirroring镜像
热门文章
- 计算机网络原理Ping、IPconfig、Nbtstat、Netstat命令详解(上)
- FAT32转NTFS / NTFS转FAT32
- Discuz!NT论坛代码小分析【转】
- linux下搜狗输入法不能输入中文的解决方案
- SimpleFOC无刷电机平衡小车
- 安利一个小巧的事件提醒Chrome 插件:talking clock
- Java 函数式编程实例
- 语是一种非常低级的语言
- 如何有效理清对象间逻辑关系?XMind鱼骨图帮你轻松搞定!
- 材料好还是计算机好,塑料PC材质好还是PP好,PP、PC、PE有何区别?哪个更好?哪个更贵?...