uniapp 放大中间图标

方法1:使用css

复制代码
/*样式直接复制到项目的App.vue即可*/

.uni-tabbar {
/*.uni-tabbar__item:nth-last-child(3) 修改倒数第三个 也就是中间的图标 我这边底部栏是五个*/
		.uni-tabbar__item:nth-last-child(3) {
			.uni-tabbar__bd {
			/*.uni-tabbar__icon 去掉原图标大小,强制为自适应宽高*/
				.uni-tabbar__icon {
					width: auto !important;
					height: auto !important;
				}
				/*图标大小 !important 强制覆盖*/
				img {
					height: 70rpx !important;
					width: 70rpx !important;
				}
			}
		}
	}

方法2:配置midButton(和tabbar中list同级)

复制代码
"midButton": {
            "width": "48px",
            "height": "48px",
            "text": "",
            "iconPath": "static/tabbar/home-s.png",
            "iconWidth": "48px",
        }

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

uni.onTabBarMidButtonTap(()=>{

                       uni.navigateTo({

                        url: '/pages/card/card'

                       });

                    })

官网资料:uni-app官网

相关推荐
晚风3081 分钟前
组件传参方式
前端·vue.js
qq_12498707537 分钟前
基于Spring Boot+vue框架的武隆旅游网站设计与实现(源码+论文+调试+安装+售后)
vue.js·spring boot·毕业设计·旅游
TE-茶叶蛋8 分钟前
HTML5 更新的功能
前端·html·html5
巴别塔的饿灵19 分钟前
事件循环机制
前端
用户527096487449023 分钟前
快速过一遍 ts
前端
yrjw26 分钟前
最新发布的一款使用ReactNative新架构支持加载的Svga动画开源插件
前端
南方kenny29 分钟前
用HTML+CSS+JS复刻了水果忍者——Vibe Coding活动摸鱼实录
前端·aigc·vibecoding
&白帝&33 分钟前
vue中常用的api($set,$delete,$nextTick..)
前端·javascript·vue.js
要加油哦~38 分钟前
vue | async-validator 表单验证库 第三方库安装与使用
前端·javascript·vue.js
y东施效颦1 小时前
使用uni-app ios 打包流程
uni-app