android微信顶端导航栏,navigation-bar

小程序组件 navigation-bar

小程序自定义导航栏适配 完美解决内容上下不居中问题

Navigation

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

使用教程

代码细节可以参考各个 Demo

在页面 json 或 app.json(在 app.json 添加则适用所有页面)，添加代码："navigationStyle": "custom"，这样顶部原来的导航就消失了，就可以自己创建导航，示例代码：

{

"navigationStyle": "custom"

}

创建自定义导航组件，参考网址：https://github.com/lingxiaoyi/navigation-bar，克隆或下载下来

，将 components 文件夹下 navBar 复制到自己小程序里的 components 文件夹下，如果导航上的返回和主页图片不想用本教程的，请看下面的 Demo8 替换默认图标的教程，您可能需要参考的目录结构：

-- miniprogram

-- components

-- navBar

-- images

-- pages

页面 json 或 app.json(在 app.json 添加则适用所有页面) 引入组件代码，"usingComponents": {"navBar": "/components/navBar/navBar"}，引入后在 wxml 页面即可使用 nvaBar 组件，就类似使用官方的 button 组件一样。

{

"navigationStyle": "custom",

"usingComponents": {

"navBar": "/components/navBar/navBar"

}

}

wxml 页面使用 navBar，示例代码：

title 是导航中间的文字，background 是导航的背景，back是是否显示返回图标(true显示，false不显示)，home是是否显示主页图标(true显示，false不显示)，bindback是点击返回时执行的函数，bindhome 是点击返回主页的函数，函数在页面 js 文件下写，可以参考 Demo，还可以再加组件属性：iconTheme='white'，但是注意响应的页面 json 也要同时添加代码："navigationBarTextStyle": "white"，实现自定义组件图标颜色为白色，如果改为black就为黑色

Demo8 替换默认图标示例

原图标在navBar.wxss里

/* wxss 修改默认的图标 */

/* 使用帮助 */

/*

* 1. 找到svg图标，我这里是用的：https://www.iconfont.cn/，复制svg

* 2. 编码我这里用：http://www.jsons.cn/urlencode/，点