uni-app tabBar中间按钮 之 midButton
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的更多相关文章
- Swift开发小技巧--TabBar中间按钮的添加方案
TabBar中间按钮的添加方案 之前做百思项目的时候,也有一个中间按钮,当时是重写的TabBar,这里介绍一个新的方法 给TabbarVC多添加添加一个控制器,这个控制器的作用仅仅是用来占位的,多了这 ...
- Ext TabPanel tabbar添加按钮
tabPanel tabbar添加按钮 this.tabPanel = Ext.create('Ext.tab.Panel', { tabBar:{ items:[{ //组件靠右 xtype: 't ...
- 监听当点击微信等app的返回按钮或者浏览器的上一页或后退按钮的事件
在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的 需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包 ...
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- tabbar选中按钮的标题颜色和字体
@implementation XMGTabBarController /* 问题: 1.选中按钮的图片被渲染 -> iOS7之后默认tabBar上按钮图片都会被渲染 1.修改图片 2.通过代码 ...
- uni app 零基础小白到项目实战-1
uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...
- iOS 自定义底部tabbar加号按钮实现方法
自定义UITabBar替换系统默认的,目的是为了在UITabBar中间位置添加一个“+号按钮” 1.自定义WBTabBar,让其继承自UITabBar,并定义点击事件代理方法. .h方法里面 #imp ...
- Vue单页面应用打包app处理返回按钮
情况 顶部返回,在header.vue公用组件中使用 this.$router.go(-1) 安卓:点击返回按钮:登录页,项目选择页,首页等几个一级页面要求提示用户是否退出app;确定,退出;取消:不 ...
- E4A写的app,点按钮,直接进入抖音指定用户界面
今天在网上看到有一个人,直接进抖音某个指定用户的界面,一般模拟的方式,要先通过搜索的方式,再选用户,点进去 但是这样操作,不大友好,也影响速度 最理想的方式,是通过 "无障碍",直接控制抖音进入指定的 ...
随机推荐
- 【Java常用类】Math
Math 说明 java.lang.Math提供了一系列静态方法用于科学计算.其方法的参数和返回 值类型一般为double型. 方法 abs 绝对值 acos,asin,atan,cos,sin,ta ...
- unittest测试框架
unittest单元测试框架不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执行,该测试框架可组织执行测试用例,并且提供了丰富的断言方法,判断测试用例是否通过,最终生成测试结果. 一.u ...
- 【记录一个问题】linux + opencv + gpu视频解码,好不容易编译通过,运行又coredump了
1.首先编译了opencv + cuda 编译选项中使用了以下关于cuvid库的内容: //"nvcuvid" libraryCUDA_nvcuvid_LIBRARY:FILE ...
- Natasha 4.0 探索之路系列(四) 模板 API
Natasha 模板 Natasha 在编译单元的基础上进行了封装整理, 并提供了多种模板帮助开发者构建功能. 使用此篇的 API 前提是您对 C# 非常熟悉, 对系统的一些类型足够了解. 据此 Na ...
- 通过location.search来获取页面传来的参数
获取页面传来的参数 <div> <script> function GetQueryString(name) { var reg = new RegExp("(^|& ...
- zabbix安装 报错 socket '/var/lib/mysql/mysql.sock' (13)]
安装界面提示: Error connecting to database: Can't connect to local MySQL server through socket '/var/lib/m ...
- tigergao--shell
#!/bin/bash #@date:2019-11-28 #@auth:tigergao #@update_all function depprot() { curdir=`dirname $0` ...
- JVM学习十二 - (复习)JVM内存结构
JVM 内存结构 Java 虚拟机的内存空间分为 5 个部分: 程序计数器 Java 虚拟机栈 本地方法栈 堆 方法区 JDK 1.8 同 JDK 1.7 比,最大的差别就是:元数据区取代了永久代.元 ...
- Jackson转换为Collection、Array
1. Jackson转化为Array 注意的地方就是实体类一定要有无参的构造方法,否则会报异常 //com.fasterxml.jackson.databind.exc.InvalidDefiniti ...
- 深入解析HashMap、HashTable (转)
集合类之番外篇:深入解析HashMap.HashTable Java集合类是个非常重要的知识点,HashMap.HashTable.ConcurrentHashMap等算是集合类中的重点,可谓&quo ...