uniapp顶部导航栏添加自定义按钮和操作
效果图:1.pages.json中作如下配置:"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "住房安全保障检查表","ap...
效果图:
1.pages.json中作如下配置:
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "住房安全保障检查表",
"app-plus":{
"titleNView":{
"buttons":[
{
"text":"提交",
"type":"none",
"color":"#007AFF",
"background":"#000000",
"fontSize":"16px",
"float":"left"
},
{
"text":"保存",
"type":"none",
"color":"#007AFF",
"background":"#000000",
"fontSize":"16px"
}
]
}
}
}
}
],
2、点击事件的执行
在页面添加onNavigationBarButtonTap 事件,可以获取到配置内容,如下所示:
onNavigationBarButtonTap:function(e){
console.log(e.text);//提交console.log(e.fontSize);//16px
}
如果需要配置全局的,则在globalStyle添加"app-plus",如下所示:
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8","app-plus":{
"titleNView":{
"buttons":[
{
"text":"提交",
"type":"none",
"color":"#007AFF",
"background":"#000000",
"fontSize":"16px",
"float":"left"
}
]
}
}
},
参见:
https://uniapp.dcloud.io/collocation/pages?id=app-plus
https://blog.csdn.net/sky_sunshine_x/article/details/106048222
更多推荐
所有评论(0)