当前位置:   article > 正文

uni-app导航栏动态设置

uni-app导航栏动态设置

uni-app导航栏动态设置

uni-app导航栏标题,自定义按钮动态设置,只限于app和h5端



一、改变导航栏标题

在uni-app的示例:接口>界面>默认导航栏中就有这种方法。
小提示:如果需要在页面进入时设置标题,可以在onReady()内执行,以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间

uni.setNavigationBarTitle({
	 title: '新的标题'
})
//这两个值一起使用
uni.setNavigationBarColor({
	frontColor:'#000000',//仅支持 #ffffff 和 #000000
	backgroundColor:'十六进制颜色',
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

二、改变导航栏自定义按钮

1.设置自定义字体图标

更多的字体图标:这里

//在pages.json文件中配置
"style": {
	"navigationBarTitleText": "我的",
	"enablePullDownRefresh":true,//开启下拉刷新
	"backgroundColor":"#F4F4F4",
	"app-plus": {
		"bounce": "vertical",
		"titleNView": {
			"buttons": [{
				"text": "\ue502",// unicode 字符表示必须 '\u' 开头,如 "\ue123"(注意不能写成"\e123")
				"fontSrc": "/static/uni.ttf",
				"fontSize": "26px",
				"color": "#FFFFFF",
				"width":"50px"
			}]
		}
	}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

效果如下:
在这里插入图片描述


2.动态修改自定义按钮文字

首先在在pages.json文件中配置默认的文字,
属性float可以控制按钮在标题栏上的显示位置,可取值"left"、“right”

"app-plus": {
	"titleNView": {
		"buttons": [{
			"text": "保存",
			"fontSrc": "/static/uni.ttf",
			"fontSize": "30rpx",//fontSize控制字体大小
			"color": "#FFFFFF",
			"width":"50px"//width属性可以控制宽度,不支持rpx
		}]
	}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

下面的方法可以设置文字,当然也可以设置文字为空,设置为空的情况下onNavigationBarButtonTap事件在部分app端还会触发。
想要设置文字为不显示,记得要在onNavigationBarButtonTap处理一下点击事件

this.setStyle('按钮')

setStyle(text) {
	let pages = getCurrentPages();
	let page = pages[pages.length - 1];
	// #ifdef APP-PLUS
	let currentWebview = page.$getAppWebview();
	let titleNView = currentWebview.getStyle().titleNView;
	// 添加文字过长截取为3个字符,请根据自己业务需求更改
	titleNView.buttons[0].text = text;
	currentWebview.setStyle({
		titleNView: titleNView
	});
	// #endif
	// #ifdef H5
	// h5 临时方案
	document.getElementsByClassName('uni-btn-icon')[1].innerText = text;
	// #endif
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

3.透明的导航栏

在需要单独一个返回的白色箭头的时候,type开启浮动让下面的盒子置顶,backgroundColor设置为透明即可。
返回事件onBackPress()可以在这里设置点击返回按钮后事件处理,在该函数中返回值为 true 时,才表示不执行默认的返回,自行处理此时的业务逻辑。

//pages.json文件中配置
"app-plus":{
	"titleNView":{
		"type":"float",
		"backgroundColor":"rgba(45, 197, 174,0)"
	}
}

//返回事件,在需要的vue页面中写
onBackPress(){
	/*
		自行处理此时的业务逻辑
	*/
	return true;//不执行默认的返回
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

效果图如下
返回按钮


结语

更多关于导航栏配置选项,可以去uni-app官方文档查看。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/652025
推荐阅读
相关标签
  

闽ICP备14008679号