微信小程序 自定义导航栏

要用自定义的导航栏,需要在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中添加

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在小程序开发的时候会遇到一些页面不需要头部导航,或像淘宝的商品详情一样自定义的导航栏。那先要清楚这导航可不能写死,...
    Lucia_Huang阅读 75,743评论 46 46
  • 1.小程序起步 (1)点击https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon阅读 8,816评论 0 0
  • 配置文件 app.json的配置(全局) {// 用来配置页面的路径"pages":["pages/index/i...
    Q轩哥阅读 27,317评论 2 31
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 12,186评论 0 9
  • 开门拉灯,我看见墙上的我了。 我感谢我的影子,感激他的伴随。我伸手和他相握,我的右手握住了他的左手。 壶里没有水,...
    八里山人程远河阅读 2,615评论 2 26

友情链接更多精彩内容