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

第一步在 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() {// 定义 webViewvar 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
                               });
                           }
                       }
                   })
               }

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

如何修改uniapp导航栏按钮位置
使用uniapp开发时,可以通过在配置文件中添加导航栏按钮,但官方文档中未提供修改button的位置,实际测试默认位置button添加角标后,边缘存在部分遮挡故寻求解决办法,通过查看DOM中按钮样式 ...
微信小程序之子页面动态修改导航栏标题文字内容
在实际的项目开发中,一般我们页面导航栏的标题文字都不是固定的,而是根据场景需要动态设置的,这个如何实现呢.微信官方提供的方法如下: 1.设置动态的 onLoad: function (options) ...
jQueryMobile新版中导航栏按钮消失的解决方法
最近将jQueryMobile的库更新到最新版后,发现以前用 jQueryMobile 写的一些东西, header 导航栏上的"后退"按钮统统不见了.这个功能挺贴心的,可以自动为 ...
uni-app 自定义导航栏图标+文字（二）
page.json: {"path": "pages/visit/addvisit/addvisit","style": {"na ...
【小程序自定义组件，冒泡，自定义导航栏，页面栈】
自定义组件在根目录新建一个components的文件夹----新建一个文件夹post----新建一个compont文件也叫post 创建完之后 post.json就自动配置好了 {"com ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
ios 系统状态栏样式修改_超简单！！！ iOS设置状态栏、导航栏按钮、标题、颜色、透明度，偏移等...
原标题:超简单!!! iOS设置状态栏.导航栏按钮.标题.颜色.透明度,偏移等 1. 要实现以下这些效果都非常简单 2. 废话不多说,先看看实现效果 3. 下面告诉你我为什么说实现这些效果非常简单比 ...
uni-app自定义tabBar；uni-app小程序自定义tabBar；uni-app小程序修改中间tabBar导航栏大小；uni-app中间导航栏凸起；uni-app修改底部导航栏
需求:要求小程序,中间的tabBar自定义凸起或者图标变大: 问题:查看uni-app的tabBar文档可知,小程序是不支持midButton的: 解决思路:隐藏uni-app原有的tabBar,然后 ...
微信小程序之导航栏样式修改、自定义导航栏及封装
在微信小程序中我们会经常看到不同字样的顶部标题,这样的样式有的是一样的,而有的却又是不同的导航栏,这是怎么回事呢,在这里我们就探讨一下.(微信小程序json文件不能有注释,复制过去的时候有注释记得自行 ...

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

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

最新文章

热门文章