修改自定义导航栏按钮文字内容的方法

第一步在 pages.json 内部定义 原生导航栏搜索框和按钮

{
			"path": "pages/tabbar/dingdan/dingdan",
			"style": {
				// App平台的特定样式
				"app-plus": {
					"bounce": "none", //取消回弹效果  
					// 是否显示滚动条 不
					"scrollIndicator": "none",
					// 导航栏设置
					"titleNView": {
						// 原生导航栏搜索框设置 
						"searchInput": {
							// 输入框非输入状态下文本对齐方式
							"align": "left",
							// 输入框是否自动获取焦点 不
							"autoFocus": false,
							// 输入框背景颜色
							"backgroundColor": "#F2F2F2",
							// 输入框的圆角半径
							"borderRadius": "6px",
							// 输入框是否可输入 true等于不可输入 
							"disabled": true,
							// 输入框提示文本
							"placeholder": "输入姓名搜索订单",
							// 提示文本颜色
							"placeholderColor": "#9C9C9C"

						},
						// 导航栏上自定义按钮
						"buttons": [
							{
								// 右侧按钮1
								// 按钮上文字颜色
								"color": "#F2F2F2",
								// 按下状态 按钮文字颜色
								"colorPressed": "#989898", 
								// 按钮在标题栏上的显示位置
								"float": "right",
								// 按钮上文字大小
								"fontSize": "35rpx",
								// 按钮上文字使用的字体文件路径
								"fontSrc": "/static/font/iconfont.ttf",
								// 按钮上显示的文字 外部引入的
								// "text": "\ue67a"
								"text": "今天2022/10/05", 
								// 导航栏右侧按钮所占的宽度 
								"width":"170px"        
							} 
							// // 右侧按钮2
							// {
							// 	"color": "#989898",
							// 	"colorPressed": "#FD6801",
							// 	"float": "right",
							// 	"fontSize": "50rpx",
							// 	"fontSrc": "/static/font/iconfont.ttf",
							// 	"text": "\ue630"
							// }
						]
					}
				}
			}

第二步在页面中 可以 动态修改以下内容 

onLoad() {
			// 调用初始化数据方法
			this.setNewsitems()
			this.xiugai()
		},
		methods: {
			
			// 修改自定义导航栏按钮文字内容
			xiugai() {

				// 定义 webView
				var webView = this.$scope.$getAppWebview()

				// 修改角标
				webView.setTitleNViewButtonBadge({
					index: 0,
					text: 12,
				});

				// 搜索框聚焦
				webView.setTitleNViewSearchInputFocus(true)

				// 搜索框失去焦点
				webView.setTitleNViewSearchInputFocus(false)

				// 修改按钮文字内容
				webView.setTitleNViewButtonStyle(0, {
					width: 'auto', //宽度自动  
					text: "今天2022年19月15日", //修改后的按钮内容
					fontSize: '15px'
				});

			}
}

附加方法

// searchInput 通过 webview 的 setStyle 方法进行更新  
                var tn = currentWebview.getStyle().titleNView;
                if (tn.buttons) {
                    uni.getSystemInfo({
                        success: function(res) {
                            if (res.platform ==
                                "ios") { // 这里在HBuilderX 1.9.9版本有个bug,searchInput的I变小写了 ,临时绕过下。更高版本会修复此bug    
                                tn.searchinput.placeholder = 'test';
                                currentWebview.setStyle({
                                    titleNView: tn
                                });
                            } else {
                                tn.searchInput.placeholder =
                                    'test'; //这里有个已知bug,HBuilderX 1.9.9上,当searchInput位于首页时,动态设置placehold会导致buttons的点击事件消失。更高版本会修复此bug    
                                currentWebview.setStyle({
                                    titleNView: tn
                                });
                            }
                        }
                    })
                }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值