midButton 中间按钮 仅在 list 项为偶数时有效 , 需要App 2.3.4+、H5 3.0.0+以上版本

midButton 属性说明

属性 类型 必填 默认值 描述
width String 80px 中间按钮的宽度,tabBar 其它项为减去此宽度后平分,默认值为与其它项平分宽度
height String 50px 中间按钮的高度,可以大于 tabBar 高度,达到中间凸起的效果
text String   中间按钮的文字
iconPath String   中间按钮的图片路径
iconWidth String 24px 图片宽度(高度等比例缩放)
backgroundImage String   中间按钮的背景图片路径

midButton没有pagePath,需监听点击事件,自行处理点击后的行为逻辑。监听点击事件为调用API:uni.onTabBarMidButtonTap,详见https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap

 导航代码演示:

"tabBar": {
"color": "#808080",
"selectedColor": "#dd0000",
"backgroundColor": "#ffffff",
//中间件 2~4生效
"midButton":{
"iconPath":"static/tab-find-current.png",
"height":"80px",
"iconWidth":"60px",
"text":"发布"
},
"list": [{
"text": "首页",
"iconPath": "static/tab-home.png",
"selectedIconPath": "static/tab-home-current.png",
"pagePath": "pages/index/index"
},
{
"text": "分类",
"iconPath": "static/tab-find.png",
"selectedIconPath": "static/tab-find-current.png",
"pagePath": "pages/category/category"
}, {
"text": "消息",
"iconPath": "static/tab-msg.png",
"selectedIconPath": "static/tab-msg-current.png",
"pagePath": "pages/message/message" },
{
"text": "我的",
"iconPath": "static/tab-me.png",
"selectedIconPath": "static/tab-me-current.png",
"pagePath": "pages/me/me"
}
]
}

监听中间按钮的点击事件演示

在 App.vue 全局里面添加下面代码:

uni.onTabBarMidButtonTap(()=>{
console.log("点击了"); });

uni-app tabBar中间按钮 之 midButton的更多相关文章

  1. Swift开发小技巧--TabBar中间按钮的添加方案

    TabBar中间按钮的添加方案 之前做百思项目的时候,也有一个中间按钮,当时是重写的TabBar,这里介绍一个新的方法 给TabbarVC多添加添加一个控制器,这个控制器的作用仅仅是用来占位的,多了这 ...

  2. Ext TabPanel tabbar添加按钮

    tabPanel tabbar添加按钮 this.tabPanel = Ext.create('Ext.tab.Panel', { tabBar:{ items:[{ //组件靠右 xtype: 't ...

  3. 监听当点击微信等app的返回按钮或者浏览器的上一页或后退按钮的事件

    在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的 需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包 ...

  4. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  5. tabbar选中按钮的标题颜色和字体

    @implementation XMGTabBarController /* 问题: 1.选中按钮的图片被渲染 -> iOS7之后默认tabBar上按钮图片都会被渲染 1.修改图片 2.通过代码 ...

  6. uni app 零基础小白到项目实战-1

    uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...

  7. iOS 自定义底部tabbar加号按钮实现方法

    自定义UITabBar替换系统默认的,目的是为了在UITabBar中间位置添加一个“+号按钮” 1.自定义WBTabBar,让其继承自UITabBar,并定义点击事件代理方法. .h方法里面 #imp ...

  8. Vue单页面应用打包app处理返回按钮

    情况 顶部返回,在header.vue公用组件中使用 this.$router.go(-1) 安卓:点击返回按钮:登录页,项目选择页,首页等几个一级页面要求提示用户是否退出app;确定,退出;取消:不 ...

  9. E4A写的app,点按钮,直接进入抖音指定用户界面

    今天在网上看到有一个人,直接进抖音某个指定用户的界面,一般模拟的方式,要先通过搜索的方式,再选用户,点进去 但是这样操作,不大友好,也影响速度 最理想的方式,是通过 "无障碍",直接控制抖音进入指定的 ...

随机推荐

  1. 【Java常用类】Math

    Math 说明 java.lang.Math提供了一系列静态方法用于科学计算.其方法的参数和返回 值类型一般为double型. 方法 abs 绝对值 acos,asin,atan,cos,sin,ta ...

  2. unittest测试框架

    unittest单元测试框架不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执行,该测试框架可组织执行测试用例,并且提供了丰富的断言方法,判断测试用例是否通过,最终生成测试结果. 一.u ...

  3. 【记录一个问题】linux + opencv + gpu视频解码,好不容易编译通过,运行又coredump了

    1.首先编译了opencv + cuda   编译选项中使用了以下关于cuvid库的内容: //"nvcuvid" libraryCUDA_nvcuvid_LIBRARY:FILE ...

  4. Natasha 4.0 探索之路系列(四) 模板 API

    Natasha 模板 Natasha 在编译单元的基础上进行了封装整理, 并提供了多种模板帮助开发者构建功能. 使用此篇的 API 前提是您对 C# 非常熟悉, 对系统的一些类型足够了解. 据此 Na ...

  5. 通过location.search来获取页面传来的参数

    获取页面传来的参数 <div> <script> function GetQueryString(name) { var reg = new RegExp("(^|& ...

  6. zabbix安装 报错 socket '/var/lib/mysql/mysql.sock' (13)]

    安装界面提示: Error connecting to database: Can't connect to local MySQL server through socket '/var/lib/m ...

  7. tigergao--shell

    #!/bin/bash #@date:2019-11-28 #@auth:tigergao #@update_all function depprot() { curdir=`dirname $0` ...

  8. JVM学习十二 - (复习)JVM内存结构

    JVM 内存结构 Java 虚拟机的内存空间分为 5 个部分: 程序计数器 Java 虚拟机栈 本地方法栈 堆 方法区 JDK 1.8 同 JDK 1.7 比,最大的差别就是:元数据区取代了永久代.元 ...

  9. Jackson转换为Collection、Array

    1. Jackson转化为Array 注意的地方就是实体类一定要有无参的构造方法,否则会报异常 //com.fasterxml.jackson.databind.exc.InvalidDefiniti ...

  10. 深入解析HashMap、HashTable (转)

    集合类之番外篇:深入解析HashMap.HashTable Java集合类是个非常重要的知识点,HashMap.HashTable.ConcurrentHashMap等算是集合类中的重点,可谓&quo ...