• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序tabBar动态添加、删除实现过程

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

首先,小程序的tabbar能动态的添加删除吗?答案是可以的。

实现过程:

  1. 开启小程序的自定义tab组件。
  2. 添加自定义tab组件目录。
  3. 在tab页onshow中,定义渲染函数,动态的去渲染自定义tab组件的内容。

 

代码:

1开启小程序的自定tab组件。

app.json文件

"tabBar": {
    "custom": true, // 这里开启自定义
     "list": [
        // 注意,这里面一定要完整定义tab页的信息,tabbar才会生效!
        ......
        ......
    ]
}

2.项目根目录创建 custon-tab-bar 组件

组件内容,参考官方文档下面的示例:

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

 

3.首页 index.js 文件

onShow: function () {
    let list = [ // 这里是 tabbar的列表,可以根据业务增减
       。。。。。
    ]

   // 这里可以根据业务逻辑增减 list内容
this.getTabBar().setData({ selected: 0, // 这里是首页tab信息的索引 list:list }) }

 

只是给出了过程,如果有不明白的小伙伴,可以给我留言。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序小Demo发布时间:2022-07-18
下一篇:
小程序前端制作-我的 小程序开发就是快 2018-4-8 18:13 阅读(0)发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap