uniapp - [全端兼容] 高性能 tabbar 底部菜单凸起效果,原生系统自定义底部菜单不卡顿、切换页面不闪烁、自动缓存页面(底部菜单中间自定义一个图片并悬浮起来)

前言

网上有很多自定义 tabbar 底部菜单的教程,但终归是组件形式,避免不了切换页面卡顿、闪屏闪烁、各平台不兼容等一系列问题。

在 uni-app 全平台兼容(H5网页网站、支付宝/微信小程序、安卓App、苹果App、nvue)项目开发中,详解基于 uniapp 系统原生 tabbar 底部菜单,植入一个向上凸起的 “图片” 菜单,并支持点击触发事件,

支持 uniapp v2 / v3 版本,您可以直接复制代码,换个中间凸起的菜单图片就能用了。


如下图所示,并非自定义组件形式,而是通过修改系统底部 tabbar 的形式,兼容性、性能毋庸置疑!

仅支持 H5 网页与 App 安卓苹果端,不支持微信小程序!

uniapp - [全端兼容] 高性能 tabbar 底部菜单凸起效果,原生系统自定义底部菜单不卡顿、切换页面不闪烁、自动缓存页面(底部菜单中间自定义一个图片并悬浮起来)_第1张图片

示例代码

整体流程及示例代码如下,

你可能感兴趣的:(+,UniApp,uni-app,底部tabbar凸起效果,不卡顿流畅自定义底部菜单,uniapp底部菜单凸起功能,uniapp,tabb菜单突起,unia自定义底部菜单闪烁卡顿,uniapp原生底部凸起菜单)