实现微信小程序自定义tabbar

最新推荐文章于 2025-02-24 17:38:08 发布

ygman

最新推荐文章于 2025-02-24 17:38:08 发布

阅读量1.4k

点赞数

分类专栏：微信小程序文章标签：自定义tabbar 微信小程序前端

本文链接：https://blog.youkuaiyun.com/one_girl/article/details/104905628

版权

本文介绍了如何在微信小程序中实现自定义tabbar，包括创建tabbar代码文件、配置信息以及处理tab页内容。在配置中指定相关字段，并通过getTabBar接口在每个tab页onShow时设置自定义tabbar的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序原生组件自定义Tabbar

创建tabbar代码文件

微信官网tabbar
在根目录下创建文件夹custom-tab-bar及相关页面

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

custom-tab-bar文件下的页面代码可参考官网示例代码

配置信息

在app.json中的tabBar项指定custom字段
与官网不同，我的所有tab页并非component构造器创建而是普通的页面所以不用在每个tab页的json里声明usingComponents项

{
  "pages": [
    "pages/index/index",
    "pages/video/index",
    "pages/mine/index",
    "pages/shop/index"
  ],
  "tabBar": {
    "custom": true,
    "color": "#666",
    "selectedColor": "#E5BA72",
    "borderStyle": "black

最低0.47元/天解锁文章