uniapp动态修改导航栏侧边按钮值

最新推荐文章于 2024-08-14 16:10:50 发布
最新推荐文章于 2024-08-14 16:10:50 发布
阅读量3.1k 收藏 1
点赞数
分类专栏： 笔记 文章标签： vue.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46365130/article/details/109428257
版权

审核

需求描述

此页面是审核和详情共用，审核状态时显示导航栏右边按钮为查看审核详情，详情状态时显示导航栏右边按钮为查看承运信息。

解决方案

在pages.json配置右边按钮为查看审核详情；当进入为查看详情状态时再在onLoad生命周期中动态修改右边按钮为查看承运信息。

代码

// #ifdef APP-PLUS
var webView = this. m p . p a g e . mp.page. mp.page.getAppWebview();
// 修改buttons
webView.setTitleNViewButtonStyle(0, {
text: ‘查看承运信息’
});
// #endif

它经不起推敲的
关注
专栏目录
uniapp动态修改导航栏上的数字。消息通知数量
m0_60662967的博客
10-17 1903
【代码】uniapp动态修改导航栏上的数字。消息通知数量。
uniapp使用swiper组件自定义左侧菜单栏和切换菜单
weixin_44784777的博客
10-13 1616
uniapp使用swiper组件自定义左侧菜单栏和切换菜单
uniapp原生导航栏实现右侧操作按钮显示并动态修改样式
热门推荐
lishuaishuai13的博客
03-14 1万+
实现效果 ①、在pages.json文件中添加以下代码 { "path": "pages/account/jieshao/jieshao", "style": { "navigationBarTitleText": "个人介绍", "navigationBarBackgroundColor": "#F25555", "navigationBarTextStyle": "white", "enablePullDownRefresh": false, "app-plus":{//app端特有属性
uniapp 导航条左侧自定义图标
最新发布
weixin_45159207的博客
08-14 221
使用字体图标时 unicode 字符表示必须"\u’开头，如“\ue606”(注意不能写成\e606"
uniapp开发h5，修改原生导航栏，自定义按钮
柑橘乌云_
09-18 1376
关于修改原生导航栏样式的。
uniapp修改 原生 导航栏 / 原生 标题栏 的 按钮 文本修改 及 按钮 样式修改 支持 app-plus 支持 h5端 (按钮显示隐藏)
dalongee的博客
03-28 6003
uniapp修改 原生 导航栏 / 原生 标题栏 的 按钮 文本修改 及 按钮 样式修改 支持 app-plus 支持 h5端 (按钮显示隐藏)
uniapp 配置导航栏右侧按钮
学习笔记
04-18 7797
uniapp 导航栏右侧的按钮配置在pages.json中，
uniapp 顶部tab切换菜单
03-16
【uniapp 顶部tab切换菜单】是基于uniAPP框架实现的一种常见的用户界面元素，它用于在多个视图间进行切换，常应用于移动应用或Web应用的顶部导航。uniAPP是一个多端开发框架，允许开发者使用Vue.js语法编写一次代码...
uniapp中如何实现侧边tab切换点击变颜色右边内容跟着联动
Coding_Peasant_Y的博客
12-21 1336
template的内容块代码 <template> <view class="wrap"> <view class="trademark">社区图片</view> <view class="box"> <scroll-view class="scrool-more" style="height: 100%" scroll-y="true" scroll-with-animation="true"> <v
uni-app 自定义导航栏组件
yyxhzdm的博客
09-13 2301
效果图： 使用一般需要隐藏原生导航栏，即可在pages.json文件中，对应的页面设置中添加一下代码即可： "navigationStyle":"custom" NavBar 导航栏 导航栏组件，主要用于头部导航，组件名：uni-custom-navBar，代码块： navigationBar。 在script中引用组件： <script> import navigationBar from "../../components/uni-custom-navbar...
vue、uniapp使用swiper组件自定义左侧菜单栏和切换菜单
qq_42642780的博客
06-13 5659
本人小白最近在学习vue和uniapp，分享一下最近实现的功能，希望大家可以指出错误！！！ 说明：本文只讲述功能实现，不讲css样式 先贴一张实现功能的gif 结构分析：页面中左侧的菜单栏和右侧主要内容是两个组件，然后再把组件放在页面中 1.1 实现点击标题标题变色（shai） （这里是左边栏组件） (1) 左侧的边栏我也是用swiper组件，这里不使用这个组件也没事因为没用到该组件的功能 <view class="slidey"> <swiper class="swiper"
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
12-13
最近一直在学习uni-app开发，由于uniapp是基于vue.js技术开发的，只要你熟悉vue，基本上很快就能上手了。 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明：app-plus配置，需注意 目前暂支持H5、App端，不支持小程序。 在page.json里配置app-plus即可 { "path": "pages/ucenter/index", "style": { "navigationBarTitleT
uniapp 导航栏右侧 文字按钮/图标按钮 阿里巴巴矢量图引入
znx981912的博客
03-24 2800
添加代码至项目 引入css以及ttf文件→static文件夹 APP.vue引入css 文字不用引入外部文件 阿里巴巴矢量图需要引入先 监听导航栏点击方法 onNavigationBarButtonTap(e){ console.log(e); } 文字 { "path" : "pages/maintenance/maintain/inventory/inventory", "style" :
uniApp 顶部导航栏右侧添加文字按钮
声声的博客
01-09 2238
【代码】uniApp 顶部导航栏右侧添加文字按钮。
Uniapp导航栏右侧自定义图标文字按钮
CHENC0518的博客
06-13 1481
fontSrc为字体图标文件 text为图标名称 以\ue开头 后面数字为字体图标中的数字，如果想拼接文字 "text": "\ue889 添加",即可。
uni-app导航栏右侧功能按钮自定义图标显示
野猿新一
12-15 2378
uni-app中导航栏功能按钮只提供了一个text属性来设置按钮的显示文本，并未提供额外的设置图标的属性。4.双击打开demo_index.html文件，可以看到字体图标对应的Unicode，后面会用到。iconfont.ttf就是字体文件，拷贝到项目的/static/iconfont目录下。需要注意的是我们上个步骤得到的字体图标的Unicode为，需要把前面的&#x替换成\u。可以理解为可作为文本显示的图标，就像我们在微信聊天中插入的表情符号。通过text属性配置字体图标的Unicode。
uniapp 使用app-plus自定义导航栏(titleNView)右侧自定义图标+文字按钮
路虽远行则将至，事虽难做则必成。
06-13 8692
最近在使用uni-app写H5移动端时候，在pages.json文件配置导航栏的图标时发现不生效去官网查阅了很久，意思是不支持本地图片，支持iconfont.ttf（iconfont本地下载）格式图片意思是在导航栏的图标需要在iconfont图标库找好以下载本地形式放到项目资源文件夹titleNView配置实现过程1.登录iconfont图标库网站找图标下载-iconfont-阿里巴巴矢量图标库2.把下载解压的文件放在static文件下-里面文件结构如此。
UNI-APP_顶部导航栏右侧添加uni-icons图标，并绑定点击事件，自定义导航栏右侧图标
小歪博客
07-03 1626
UNIAPP_顶部导航栏右侧添加uni-icons图标，并绑定点击事件，自定义导航栏右侧图标
uniapp 原生导航栏动态修改标题 添加右侧文字按钮
qq_52099965的博客
11-13 4684
uniapp 原生导航栏动态修改标题添加右侧文字按钮
uniapp更改导航栏按钮距离
05-24
Uniapp 中导航栏按钮距离可以通过修改页面的 `pages.json` 文件中的 `navigationBarTextStyle` 和 `navigationBarTitleText` 属性来实现。 例如，将导航栏左侧按钮离左边距离调整为30像素，可以在 `pages.json` 文件中添加如下配置： ```json { "pages": [ { "path": "pages/index/index", "navigationBarTitleText": "首页", "navigationBarTextStyle": { "marginLeft": "30rpx" } } ] } ``` 其中，`navigationBarTextStyle` 属性可以设置导航栏标题栏样式，这里我们通过设置 `marginLeft` 属性来调整左侧按钮距离左边的距离。 同理，如果要调整右侧按钮距离右边的距离，可以使用 `marginRight` 属性进行设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值