在uni-app的开发过程中,想要将位于中间的图标设置更大,通过一般的更改导航栏图标大小方式实现不了。经过查看官方文档可以发现,我们可以通过midbutton来设置中间tabbar的样式。

但前提是,中间按钮仅在tabbar个数为偶数时才有效(从1开始计数)

对于midbutton的一些属性官方也给出了相应的解释。

但是不同于tabbar的是,midbutton的页面跳转没有了之前的pagePath,需监听点击事件,自行处理点击后的行为逻辑。监听点击事件为调用API:uni.onTabBarMidButtonTap。

API放在一个app.vue的页面内就好了。url里填写你要跳转的路径。

uni.onTabBarMidButtonTap(()=>{
uni.navigateTo({
url: '/pages/card/card'
});
})

  

效果如图显示:

关于uni-app导航栏中 中间大图标的设置的更多相关文章

  1. 在开源UOJ的导航栏中添加新页面链接

    前言 刚用开源UOJ搭建OJ成功时就想在导航栏那里添加一个站内页面链接,无奈当时乱搞水平低,网上也没有教程,不晓得怎么弄 今天突然来了闲情乱搞一通,结果还真乱搞成了...特意写下为后来人少走点弯路 前 ...

  2. 利用overflow实现导航栏中常 出现的倒三角下拉小图标

    常用网页界面中,导航栏中的倒三角下拉小图标实现,可用overflow: 效果如右图: .Triangle{position:relative;width:280px;height:15px;} ;ov ...

  3. 【代码笔记】iOS-在导航栏中显示等待对话框

    一,效果图. 二,代码. ViewController.m #import "ViewController.h" @interface ViewController () @end ...

  4. window10删除导航栏中的onedrive

    前面介绍了如何删除导航栏中的“快速访问”,对于一个根本用不着的“oneDrive”肯定也得搞掉. 0.处理前: 1.卸载onedrive是不能清除导航栏里面的onedrive的,进入注册表regedi ...

  5. magento导航栏中如何加入home主页

    magento在导航栏中加入home主页是很简单的,几个步骤即可在magento导航栏中加入home主页! 下面简单介绍下如何在magento导航栏中加入home主页: 首先我们打开对应应用的模板文件 ...

  6. bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容

    问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的  附带图  片不能够显示出来,图片始终有一部分的高度  被隐藏了 后来通 ...

  7. 导航栏和里面的View设置的是同一颜色值,实际运行又不一样.

    导航栏和里面的View设置的是同一颜色值,实际运行又不一样.如何保证两者的颜色一致呢?  答案就是:( navigationBar.translucent = NO; )   去除 导航条的分割线(黑 ...

  8. SAP CRM 将组件整合至导航栏中

    到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. ...

  9. MMDrawerController在表视图和导航栏中的使用

    1.如果不在APPDelegate引入MMDrawerController框架,那么就要注意在需要点击的视图控制器中的对象的获取. //工程中标签视图控制器 MainTabBarViewControl ...

随机推荐

  1. 架构师必备:MySQL主从延迟解决办法

    上一篇文章介绍了MySQL主从同步的原理和应用,本文总结了MySQL主从延迟的原因和解决办法.如果主从延迟过大,会影响到业务,应当采用合适的解决方案. MySQL主从延迟的表现 先insert或upd ...

  2. 命名空间、作用域、LEGB法则、垃圾回收机制

    一.命名空间.作用域.LEGB法则. 1.命名空间和作用域 : 命名空间:变量名称与值的映射关系 作用域:变量作用的区域,即范围. 注意:class/def/模块会产生作用域:分支语句,循环语句,异常 ...

  3. 【机器学习基础】逻辑回归——LogisticRegression

    LR算法作为一种比较经典的分类算法,在实际应用和面试中经常受到青睐,虽然在理论方面不是特别复杂,但LR所牵涉的知识点还是比较多的,同时与概率生成模型.神经网络都有着一定的联系,本节就针对这一算法及其所 ...

  4. [Java]Sevlet

    0 前言 对于Java程序员而言,Web服务器(如Tomcat)是后端开发绕不过去的坎.简单来看,浏览器发送HTTP请求给服务器,服务器处理后发送HTTP响应给浏览器. Web服务器负责对请求进行处理 ...

  5. 【二食堂】Beta - Scrum Meeting 10

    Scrum Meeting 10 例会时间:5.25 18:30~18:50 进度情况 组员 当前进度 今日任务 李健 1. 继续文本导入.保存部分的工作issue 2. 完成了技术博客 1. 继续文 ...

  6. [no_code团队]项目介绍 & 需求分析 & 发布预测

    项目 内容 2020春季计算机学院软件工程(罗杰 任健) 博客园班级博客 作业要求 团队项目选择 我们在这个课程的目标是 在团队合作中提升软件开发水平 这个作业在哪个具体方面帮助我们实现目标 进行项目 ...

  7. 线程池系列二:一张动图,彻底懂了execute和submit

    ​ 我们知道线程池通过execute方法执行提交的Runnable任务,但Runnable只是执行任务,没有返回任何信息. [线程池原理:线程池原来是个外包公司,打工人我悟了] 若是我们想在异步执行完 ...

  8. C/C++编程笔记:浪漫流星雨表白装b程序

    作为一个未来可能会成为一个专业程序员的小伙们,不知道你们现在学到哪里了,学了点东西之后有没有想在你女朋友面前装个大大的b呢,今天小编就给你一个机会来研究一下下边的代码吧,保证大写的N,当然大佬是排除在 ...

  9. 通过串口利用printf函数输出数据

    一.printf函数格式 printf函数具有强大的输出功能 %表示格式化字符串输出 目前printf支持以下格式的输出,例如: printf("%c",a);输出单个字符. pr ...

  10. 安装、卸载 node.js出错 Could not access network location *:\node.js\ 出错

    上周五,WIN10自动更新系统,导致我的node.js 和 Gradle 还有解压的winRAR都不能用!!!可恶 自动更新!!可恶啊!!! 然后我想把node.js重新卸载了再安装,结果 很慌很慌, ...