Taro4+Vue3小程序自定义底部导航（TabBar）实现

张开发
• 2026/5/1 23:57:13 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

Taro4+Vue3小程序自定义底部导航（TabBar）实现
小程序的tabbar比较原始想要改成自己的样式又比较难所以一般情况下都会自己写个tabbar首先从 src 目录下面找到 app.config.js 文件加入 tabbar 配置以下代码exportdefault{pages:[pages/home/index,pages/message/index,pages/user/index,pages/login/index],window:{navigationStyle:custom},//请看这里tabBar:{custom:true,//表示tabbar自己写不用小程序的//这个必须写不写报错//pagePath就是跳转页面咯list:[{pagePath:pages/home/index,},{pagePath:pages/message/index,},{pagePath:pages/user/index,}]}}在 src 下面创建一个名为 custom-tab-bar 的文件夹必须是这个名字不能自由发挥在此文件夹下创建两个文件在 index.json.js 里面加exportdefault{component:true}index.vue 里面写你自定义的 tabbar 代码就是 vue 常规页面写法要注意的是在页面当中必须加一下代码不然无法正常使用 UI 组件比如图标组件script// 只支持 Options API 写法不支持 script setup 注意 exportdefault{options:{addGlobalClass:true,},}/script删除微信开发工具缓存再重新启动一下项目比如yarndev:weapp发现会有两个根节点这样就算完成了

更多文章