uniapp使用vue3和ts开发小程序自定义tab栏,实现自定义凸出tabbar效果

uniapp使用vue3和ts开发小程序自定义tab栏,实现自定义凸出tabbar效果_第1张图片要实现自定义的tabbar效果,可以使用自定义tab覆盖主tab来实现,当程序启动或者从后台显示在前台时隐藏自带的tab来实现。自定义一个tab组件,然后在里面实现自定义的逻辑。

组件中所使用的组件api可以看:Tabbar 底部导航栏 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

先在components/tabbar/里面实现组件逻辑:





组件里面实现tab切换的api里面使用规范:uni.navigateTo(OBJECT) | uni-app官网

注意看使用switchTab的时候,url的前面要有/,然而pages.json里面的是不需要的。

uniapp使用vue3和ts开发小程序自定义tab栏,实现自定义凸出tabbar效果_第2张图片 

然后只需要在tab的主页面中引入这个组件即可:uniapp使用vue3和ts开发小程序自定义tab栏,实现自定义凸出tabbar效果_第3张图片

然后重新打开即可看到效果:uniapp使用vue3和ts开发小程序自定义tab栏,实现自定义凸出tabbar效果_第4张图片

你可能感兴趣的:(HTML前端,客户端开发,uni-app,小程序,前端)