uniapp 设置 tabbar 的 midButton 按钮

效果展示:

中间的国际化没生效(忽略就行) 

 示例代码:

然后在  App.vue 中进行监听:

<script>
	export default {
		onLaunch(e) {
			// #ifdef APP
			uni.onTabBarMidButtonTap(()=>{
				console.log("中间按钮点击回调");
			})
			// #endif
		}
	}
</script>

<style lang="scss">
</style>

 

 官方文档参考:pages.json 页面路由 | uni-app官网

uniapp设置自定义tabbar可以通过修改配置文件来实现。首先,你可以在配置文件中添加一个midButton字段来控制是否显示中间按钮凸起的效果。接下来,你可以配置tabs字段来定义每个tab的图标、文本等属性。你还可以通过配置或者动态修改tab obj中的show属性来动态显示或隐藏某个tab。例如,你可以将第一个tab的show属性设置为false来隐藏它。此外,你还可以使用mark属性来设置角标数量,并决定是否显示角标。在每个导航页的onShow生命周期中使用uni.hideTabBar({animation: false})可以解决切换时出现原生tabBar的问题。这样,就可以实现自定义的tabbar效果了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [uniapp自定义tabbar(支持中间凸起,角标,动态隐藏tab,全端适用)](https://blog.csdn.net/abs625/article/details/129496348)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [uniapp小程序自定义tabBar,根据身份切换自定义tabBar](https://blog.csdn.net/weixin_59803648/article/details/127203398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

某公司摸鱼前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值