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 不是固定值 根据自己分类而定 }) }
人生无常大肠包小肠
分类:
小程序
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.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 数据库常见两种引擎