微信小程序之实现页面顶部导航栏透明、隐藏效果(navigationBar)欢迎点赞收藏

我们在开发微信小程序的过程中大家都知道,导航栏的颜色可以在 app.json 中的 window 属性里面添加 navigationBarBackgroundColor 属性,但是里面的颜色只能为纯色,不能使用 rgb 颜色,或者 rgba 的色号。

需求分析

但是有时候我们想要实现这种效果,想要让顶部的导航栏透明隐藏,这个时候就需要发动我们的小脑筋想一下要如何实现了。

微信小程序之实现页面顶部导航栏透明、隐藏效果(navigationBar)欢迎点赞收藏_第1张图片

我们可以看一下官网是否有此类方法:Navigation

官网说:Navigation是小程序的顶部导航组件,当页面配置 navigationStyle 设置为 custom 的时候可以使用此组件替代原生导航栏。

那么,我们就知道这种效果是可以实现的,其实代码实现也超级简单,下面请看代码配置:

代码实现

一、全局顶部导航栏隐藏

app.json 里面的 window 增加 navigationStyle:custom 即可,部导航栏就会消失,只保留右上角胶囊状的按钮。

"window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "教育联盟",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
},

我们实现了顶部导航栏隐藏,就可以根据我们自己的需求进行顶部导航栏的定制业务,使我们的小程序看上去更加美观。

二、部分页面顶部导航栏隐藏

通过配置部分页面的 json 文件,来覆盖全局 app.json 中的导航栏配置。

app.json:

"window": {
	// ... 其他配置省略
	"navigationStyle":"default"
}

page.json:

{
  "navigationStyle":"custom",
}

如果想要某一个页面实现导航栏隐藏,只需要在这个页面设置 "navigationStyle":"custom" 就可以了。


总结

大家看一下,是不是超级简单,我们不清楚如何实现的原因就是因为我们对其相关的 API 不太熟悉,只要找对方法,还是很容易的。

希望上面的内容对你的工作学习有所帮助,欢迎一键三连哦、

各位 加油!

你可能感兴趣的:(小程序系列,应用场景,新星计划,小程序,js,navigation,导航栏)