要用自定义的导航栏,需要在app.json中配置
目前是不支持单个页面设置的,把导航栏写成一个组件
navigation.wxml
navigation.wxss
navigation.json,自定义组件必须
navigation.js
Component构造器用户定义组件,调用Component构造器可以指定组件的属性,数据,方法;
properties: { // 组件的对外属性
myProperty: {// 属性名
type:String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value:'', // 属性初始值(可选),如果未指定则会根据类型选择一个
observer:function(newVal, oldVal, changedPath){
// 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
// 通常 newVal 就是新设置的数据, oldVal 是旧数据}
},
myProperty2:String // 简化的定义方式
},
data: {},// 私有数据,可用于模板渲染
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached:function(){ }, // 组件生命周期函数,在组件实例进入页面节点树时执行
methods: { // 组件事件,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用
onMyButtonTap:function(){
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似})
},
// 内部方法建议以下划线开头
_myPrivateMethod:function(){
// 这里将 data.A[0].B 设为 'myPrivateData'
this.setData({
'A[0].B':'myPrivateData'
})
},
_propertyChange:function(newVal, oldVal){ }
}
使用自定义导航栏
wxml使用:
注意:在 properties 定义段中,属性名采用驼峰写法(propertyName);在 wxml 中,指定属性值时则对应使用连字符写法(component-tag-name property-name="attr value"),应用于数据绑定时采用驼峰写法(attr="{{propertyName}}")。
json声明组件,组件地址
js使用:
webview页面如果自定义导航栏的话,目前的做法只能在webview中添加