uni-app自定义导航栏右侧做增加按钮并跳转链接

uni-app 在页面上的导航栏右侧做一个增加的图标并实现跳转

1. 先看效果图

2. 实现思路

使用阿里图标库的字体图标, 下载放入本地文件 pages页面引入即可这里说一句 uni-app 不支持在线图标所以需要下载下来

引入到本地项目中

3. pages.json文件中配置

如果是要放在左边改float : left 即可

4.page的代码

{"path": "pages/repairOrder/repairOrder","style": {"navigationBarTitleText": "维修接单","enablePullDownRefresh": false,"app-plus": {"titleNView": {"buttons": [{"text": "","fontSrc": "/static/iconfont/iconfont.ttf","fontSize": "23","float": "right"}]}}}}

5.点击按钮后跳转事件

         onNavigationBarButtonTap(e) {uni.navigateTo({url: `/pages/repairOrder/orderSave`})},

可以打印e出来看具体参数有问题评论区

uni-app自定义导航栏右侧做增加按钮并跳转链接相关推荐

IOS 自定义导航栏标题和返回按钮标题
IOS中自定义导航栏标题: UILabel *titleText = [[UILabel alloc] initWithFrame: CGRectMake(160, 0, 120, 50)]; tit ...
android 自定义标签导航栏,自定义导航栏app下载-自定义导航栏（Custom Navigation Bar）安卓版v0.4.3-PC6安卓网...
自定义导航栏(Custom Navigation Bar)app是款非常好用的实用工具,自定义导航栏能让你自己设置个性的导航栏,再也不用为单调的导航栏而发愁,独特且唯一,感兴趣的朋友就来下载自定义导航 ...
自定义导航栏左上角胶囊按钮返回、首页小房子
示例项目地址:https://github.com/Shay0921/header-navbar 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平 ...
uniapp中自定义导航栏
相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这个时候就需要我们自己自定义导航栏使用啦. 当然u ...
uni-app自定义导航栏
有时我们需要对导航栏进行自定义,接下来就是对uni-app进行代码的编写对于一些不是很复杂的顶部导航,当然使用原生导航栏实现是最佳选择 uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只 ...
修改自定义导航栏按钮文字内容的方法
第一步在 pages.json 内部定义原生导航栏搜索框和按钮 {"path": "pages/tabbar/dingdan/dingdan","s ...
iOS个人中心渐变动画、微信对话框、标签选择器、自定义导航栏、短信验证输入框等源码...
iOS精选源码简单的个人中心页面-自定义导航栏并予以渐变动画程序员取悦女票的正确姿势---Tip1(iOS美容篇) iOS 前台重启应用和清除角标的问题微信原生提醒对话框3.0 JHLikeBu ...
分别用ToolBar和自定义导航栏实现沉浸式状态栏
一.ToolBar 1.在build.gradle中添加依赖,例如: compile 'com.android.support:appcompat-v7:23.4.0' 2.去掉应用的ActionBa ...
ithoughts怎么自定义样式_微信小程序自定义导航栏组件封装
相信很多小伙伴在开发微信小程序的时候都会有自定义顶部导航栏的需求,不够要说明的是小程序右上角的胶囊是不能自定义的哦,除了胶囊其他地方都是可以根据自己的项目而定了,在一次小程序开发中就需要对顶部进行自定 ...

uni-app自定义导航栏右侧做增加按钮并跳转链接

uni-app自定义导航栏右侧做增加按钮并跳转链接

1. 先看效果图

2. 实现思路

3. pages.json文件中配置

4.page的代码

5.点击按钮后跳转事件

uni-app自定义导航栏右侧做增加按钮并跳转链接相关推荐

最新文章

热门文章