微信小程序自定义顶部状态栏
2023-09-11 14:18:54 时间
因为工作需要,要在微信小程序中自定义顶部导航栏,通过这篇文章来记录一下自己所得~
第一步:
需要在json文件中配置"navigation" : "custom"
,完成自定义导航栏,只保留胶囊按钮,效果如下图:
做完以上步骤,基本上就可以自定义导航栏了,但是,从页面上可以看出,页面的内容被挡住了,可以通过样式加上边距解决这一问题。
第二步:
给内容加上样式可以使内容显示出来
这时又有一个问题出现,我们的边距是固定的,但是不同型号的手机头部那条栏目高度可能不一致,所以为了适配更多手机型号,我们需要进一步优化。
第三步:
在上面图中我标出了导航栏的高度、胶囊按钮与顶部的距离、胶囊按钮与右侧的距离。小程序可以通过wx.getMenuButtonBoundingClientRect()
l来获取胶按钮的信息,可以通过wx.getSystemInfo
获取设备的信息。
通过获取到的信息可以计算出上面所列举到的三个值:
- 导航栏高度 =
statusBarHeight + height + (top-statusBarHeight)*2
; - 胶囊按钮与顶部的距离 =
top
; - 胶囊按钮与右侧的距离 =
windowWidth - right
;
通过以上三步就可以完成导航栏的自定义,并且做到内容不会被遮盖。
相关文章
- 微信小程序 - 自定义switch切换(示例)
- 微信小程序 - 深度定义骨架屏(提示)
- 【微信小程序】-- 自定义组件 - 数据监听器 - 案例 (三十五)
- 【微信小程序】-- 自定义组件 - 数据监听器 (三十四)
- 【微信小程序】-- 案例 - 本地生活(列表页面)(三十)
- 【微信小程序】-- 其它常用组件介绍 -- button & image(八)
- 微信小程序 - 引入使用 Moment.js 日期处理库(详细教程)
- 微信小程序 - swiper 组件自定义指示器样式(通过类名设置样式)
- 微信小程序的概要
- 《微信小程序开发入门精要》——第1章,第1.1节什么是微信小程序
- 微信小程序自定义tabbar底部导航栏
- 微信小程序---存储本地缓存数据
- 微信小程序自定义头部导航nav
- 微信小程序自定义tabbar底部菜单
- 微信小程序自定义函数返回值
- 微信小程序自定义组件的坑之 hidden、boolean 属性和花括号
- 微信小程序入门(一)
- 微信小程序里自定义组件,canvas组件没有效果
- 微信小程序 | 微信公众平台SpringBoot开发之收到消息后进行简单回复
- odoo13 与微信小程序结合 ModuleNotFoundError: No module named ‘Crypto‘ 二
- 微信小程序学习第11天——Vant Weapp组件库、API Promise化、全局数据共享Mobx、分包
- 微信小程序学习第9天——自定义组件的生命周期与组件所在页面的生命周期
- 【微信小程序】使用setTimeout制作定时器的思路