最新消息:iOS编程开发交流群(6906921) ,Mac.Cocoa开发交流群(7758675) 欢迎iOS/macOS开发编程爱好及学习者加入!

微信小程序动态设置与自定义TabBar

编程 天狐 13108浏览 1评论

有没有遇到过这样的需求?不同人员登录后显示不同的tabbar内容,tabbar item个数不一样,样式也不一样?

基于"微信官方的 自定义tabbar",延伸下了,做了动态设置功能。

要点就是我们获取不到自定义tabbar的实例,所以也没办法调用它的方法。反向思维,自定义tabbar中可以注册app的回调,所以动态变更就解决啦。

如下:

微信小程序动态设置与自定义tabbar

 

1.app.json

在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。
所有list里要放入所有可能出现的tabbar item页面。

2. 添加 tabBar 代码文件

在代码根目录下添加入口文件(直接从官方demo拷贝):

3.app.js

 

4.custom-tab-bar index.js

 

5.切换

6.选中状态的处理

 

不啰嗦了直接上代码。

github地址:https://github.com/shaojiankui/wechat-custom-tab-bar

详细信息参考官方文档:

官方文档与Demo:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html?search-key=%E8%87%AA%E5%AE%9A%E4%B9%89tabbar

转载请注明:天狐博客 » 微信小程序动态设置与自定义TabBar

微信 OR 支付宝 扫描二维码
为天狐 打赏
非常感谢你的支持,哥会继续努力!
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 没有出现页面和tabbar闪动的bug吗
    老妖4年前 (2021-01-12)回复