WeChat-SmallProgram++:微信小程序自定义底部tabbar

1):实现效果:

2):实现原理:自定义tabBar微信开放文档

3):实现步骤

在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。

复制代码
"tabBar": {
    "custom": true,
    "color": "#39b54a",
    "selectedColor": "#39b54a",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "box-shadow": "0 0 6px 0",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/images/home.png",
        "selectedIconPath": "static/images/home@selected.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/catalog/catalog",
        "iconPath": "static/images/home.png",
        "selectedIconPath": "static/images/home@selected.png",
        "text": "分类"
      }
    ]
  }
复制代码

在代码根目录下添加入口文件

编写 tabBar 代码

用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。

另外,自定义组件新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例。

要在这些自定义tabbar页的onShow中调用以下代码:

if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1  // 1 不是固定值 根据自己分类而定
   })
}

戳我查看>更多开源封装组件


 

人生无常大肠包小肠

posted @   coding++  阅读(151)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 我与微信审核的“相爱相杀”看个人小程序副业
· DeepSeek “源神”启动!「GitHub 热点速览」
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
历史上的今天:
2020-04-15 coding++:Dubbo的介绍和架构
2020-04-15 coding++:springboot 多线程@Async
2020-04-15 coding++:java 线程池概述
2020-04-15 coding++:MySQL 数据库常见两种引擎
点击右上角即可分享
微信分享提示