微信小程序使用uniapp开发时顶部的处理

887 阅读1分钟

1.自定义顶部

小程序的顶部默认是自定义的

image.png

那么我们怎么可以自定义顶部呢, 在pages.json上加一个 "navigationStyle": "custom",就行了,可以把自定义的顶部放在components中这样在项目中,不需要引用就可以直接使用

image.png

image.png 2.顶部颜色的改变 项目顶部的电量和默认的时间都是黑色的,我们怎么改变他的颜色呢,在pages.josn添加一个 "navigationBarTextStyle": "white",就可以改成白色了,需要什么颜色可以自己改。

image.png

image.png

2.关于胶囊的处理

1.隐藏胶囊

右上角的胶囊怎么隐藏呢,在pages.json添加一个 "navigationBarRightButton": {"hide": true}就行了。

image.png

image.png

2.胶囊的信息怎么获取

在处理顶部的时候,常常要根据胶囊的信息处理一些dom,那么怎么获取胶囊的信息呢,使用uni.getMenuButtonBoundingClientRect()就可以获取胶囊的信息了

image.png