使用uniapp开发APP，自定义导航栏按钮

2022-03-02 17:01:51 阅读：318 来源： 互联网

标签：uniapp 自定义 APP 保存 page 按钮 app pages

先上效果图

首先要在page.json中配置app-plus

{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "个人信息",
				"app-plus": {
					"titleNView": {
						"buttons": [{
							"text": "保存",
							"fontSrc": "/static/icon/iconfont.ttf",
							"fontSize": "28rpx",
							"color": "#000000"
						}]
					}
				}
			}
		},

注：fontSrc是按钮上文字使用的字体文件路径。不支持网络地址，请统一使用本地地址。

我用的是阿里巴巴图标库，下载后放至项目中即可

这里有一个需求就是角色不同，按钮文字不同（常见的有进入一个页面时先显示‘保存’，点击保存后变成‘编辑’）

onShow(){
    // 自定义导航栏保存按钮
    let pages = getCurrentPages();
    var page = pages[pages.length - 1];
    var currentWebview = page.$getAppWebview();
    currentWebview.setTitleNViewButtonStyle(0, {
        text: this.role == '1' ? '保存' : ' '  //角色为1时显示保存,否则显示为空
    });
}

操作保存按钮时在methods里面使用onNavigationBarButtonTap方法

// 保存修改
onNavigationBarButtonTap() {
	if (this.roleName == '1') {
		    //处理业务逻辑
	}
},

标签：uniapp,自定义,APP,保存,page,按钮,app,pages
来源： https://blog.csdn.net/WeiflR10/article/details/123233915

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用uniapp开发APP，自定义导航栏按钮