小程序自定义导航栏组件(二)

一.首先需要创建一个组件component文件。(在app.json创建组件,会生成四个文件:wxml,wxss,js,json)

<1>wxml:里面编辑你的自定义导航里的内容。

小程序自定义导航栏组件(二)

<2>.json: 在json文件里面进行自定义组件声明,将component字段声明为true。

小程序自定义导航栏组件(二)

<3>js:组件js文件里面使用Component({})来注册,并提供组件的属性定义、内部数据和自定义方法,组件的属性值和内部数据将用于wxml的渲染。我的导航栏,只获取了手机状态栏高度从而适配不同型号手机,还有自定义了界面的返回交互,以及标题。

小程序自定义导航栏组件(二)

即组件创建完成。

接下来在每个页面引入组件。

二、在A页面去引入组件

<1>如图:在index.wxml页面,引入<component title='首页' show_bol='{{true}}'></component>

(这里的show_bol='{{true}} 为true时候不显示返回按钮,为false时显示返回按钮,具体根据自己情况来定义)

小程序自定义导航栏组件(二)

<2>在index.json里面进行引用声明,提供自定义组件的标签名和自定义组件的引用路径。

小程序自定义导航栏组件(二)

这样自定义导航栏组件就完成了。

详细的源码地址在这里:https://github.com/mr0723/component  自己拉代码看