v-nav指令属性列表
属性名 | 属性描述 | 类型 | 必选 | 默认 |
---|---|---|---|---|
title | 导航栏标题 | string | no | 空字符串 |
showbackbutton | 是否显示(左边的)返回按钮 | boolean | no | false |
onbackbuttonclick | 返回按钮点击回调函数 默认调用history.go(-1) | function | no | undefind |
showmenubutton | 是否显示(右边的)菜单按钮 | boolean | no | false |
onmenubuttonclick | 菜单按钮点击回调函数 | function | no | undefind |
backbuttontext | 返回按钮文字(图标) | string | no | 见备注 |
menubuttontext | 菜单按钮文字(图标) | string | no | 见备注 |
html页面
<div class="page has-navbar" v-nav="{title: '标题',showbackbutton:true,onbackbuttonclick,showmenubutton:true,onmenubuttonclick,menubuttontext:'+'}"></div>
js中需要写两个方法: onbackbuttonclick 和 onmenubuttonclick , 分别对应返回按钮和菜单按钮两个事件,这里我用的是vue框架
var model={
template: '#tem',
data: function(){
return data;
},
methods: {
onmenubuttonclick:function(){ }, onbackbuttonclick:function(){ }
}
}
效果: 返回键和菜单键都是可以点的
如对本文有疑问, 点击进行留言回复!!
web前端基础之HTML5语义化新标签学习笔记(8)学会用语义化标签
网友评论