uni-app导航栏动态设置

落日映苍穹つ 2022-12-06 01:10 1957阅读 0赞

# uni-app导航栏动态设置 #

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

--------------------

### 导航栏动态设置 ###

*  uni-app导航栏动态设置
 *  一、改变导航栏标题
 *  二、改变导航栏自定义按钮
 *   *  1.设置自定义字体图标
     *  2.动态修改自定义按钮文字
     *  3.透明的导航栏
 *  结语

--------------------

# 一、改变导航栏标题 #

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

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

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

## 1.设置自定义字体图标 ##

更多的字体图标：[这里][Link 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"
    			}]
    		}
    	}
    }

效果如下：  
![在这里插入图片描述][20200911152119711.png_pic_center]

--------------------

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

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

"app-plus": { 
    	"titleNView": { 
    		"buttons": [{ 
    			"text": "保存",
    			"fontSrc": "/static/uni.ttf",
    			"fontSize": "30rpx",//fontSize控制字体大小
    			"color": "#FFFFFF",
    			"width":"50px"//width属性可以控制宽度，不支持rpx
    		}]
    	}
    }

下面的方法可以设置文字，当然也可以设置文字为空，设置为空的情况下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
    },

--------------------

## 3.透明的导航栏 ##

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

//pages.json文件中配置
    "app-plus":{ 
    	"titleNView":{ 
    		"type":"float",
    		"backgroundColor":"rgba(45, 197, 174,0)"
    	}
    }
    
    //返回事件，在需要的vue页面中写
    onBackPress(){ 
    	/* 自行处理此时的业务逻辑 */
    	return true;//不执行默认的返回
    }

效果图如下  
![返回按钮][20200911154937330.png_pic_center]

--------------------

# 结语 #

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

[Link 1]: https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons
[20200911152119711.png_pic_center]: /images/20221123/2e8804bf60ae4f8d8a9012ca519f2ac1.png
[20200911154937330.png_pic_center]: /images/20221123/ecb3fdb9d7124c0cae96d24bb909ca66.png