收藏
回答

如何动态设置底菜单?

业务上需要根据用户角色来动态配置底菜单,例如:角色A:需要使用底菜单 a,b,c;角色B:需要使用底菜单 a,c,d;角色C:需要使用底菜单 x,y,z,底菜单的数量是不固定的。参考了官方的自定义tabbar,似乎是无法满足需求的。官方自定义tabbar也需在json中声明,且‘只能配置最少 2 个、最多 5 个 tab’,只是把渲染这块交给了开发者。

抛开官方的方案,可以用自定义组件,然后在每个页面内引入组件,自己控制路由和显示内容。这个是可以满足业务需求,为了保证类似于原来的tabbar,路由用首页开始到tabbar页面,一直用 wx.redirectTo()。相应也出现了一些问题。

  1. 页面的生命周期发生了变化。这种路由条件下每次都会触发onload函数,这个是区别于原来的tabbar

  2. 每次进入页面自定义组件都要重新加载,会出现闪烁问题。这个情况在部分机型上还是挺明显的。

想过去修改页面栈,自己去模拟switchTab,尽管官方不建议修改。事实上我也没有找到修改的办法。getCurrentPages() 似乎返回页面栈拷贝,修改无效。

不知道各位有没有类似的解决方案,还望不吝赐教。

回答关注问题邀请回答
收藏

3 个回答

  • Fr. N.
    Fr. N.
    2019-11-15

    其实就是允许用户通过pc端的系统,自定义底菜单... 是不是有点难为小程序了。

    2019-11-15
    有用
    回复
  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2019-11-15

    找到一个简单的方法

    2019-11-15
    有用
    回复 3
    • Fr. N.
      Fr. N.
      2019-11-15
      纳尼,可以简单给个思路嘛?
      2019-11-15
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2019-11-15回复Fr. N.
      2019-11-15
      回复
    • Fr. N.
      Fr. N.
      2019-11-16回复o0o有脾气的酸奶
      我猜想应该是这样的,在app.json - tabbar - list 声明的路径会作为底菜单路径来处理,是可以使用wx.switchTab的。不过这个只能声明2-5个。为了能让用户自定义(会超过配置的5个范围),最后我还是自己写了个组件,尽可能的降低渲染时间,也是没办法了
      2019-11-16
      回复
  • .
    .
    2019-11-15


    https://developers.weixin.qq.com/miniprogram/dev/api/ui/tab-bar/wx.setTabBarItem.html

    2019-11-15
    有用
    回复 6
    • Fr. N.
      Fr. N.
      2019-11-15
      我把需求粘过来吧:1、比如A用户是管理员角色,他进入小程序后tabbar需要展示的是:首页、用户管理、我的。
      而B用户是普通用户,他进入小程序后tabbar需要展示:首页、最新资讯、我的。
      这种场景就需要动态更改tabbar页面路径啊。
      2、还有如果B用户进入只需要展示:首页、我的。这种情况的话我们就需要动态删除某个tabbar选项。这两种功能现在都没有,只能通过自定义tabbar去做,但是自定义tabbar比较麻烦,也没有自带的tabbar稳定。


      即使是自定义的底菜单,还是只能在 json文件中声明的2-5个范围内。这块也是不满足需求的,令人头疼。
      2019-11-15
      回复
    • .
      .
      2019-11-15回复Fr. N.
      怎么不行,A进来就分别设置三个,B进来就设置index==1的为资讯
      2019-11-15
      回复
    • .
      .
      2019-11-15
      还有就是B进来先设置两个,A进来在设置一个,三个时就替换,一个三个一个两个就先设置两个再多设置一个
      2019-11-15
      回复
    • Fr. N.
      Fr. N.
      2019-11-15回复.
      1. 这个接口没办法设置路径,即时是 index==1设置为咨询,需要跳转的路径怎么修改。2. '先设置两个,再设置一个‘,好像没有新增和移除底菜单的接口,这个怎么实现?
      2019-11-15
      回复
    • .
      .
      2019-11-15回复Fr. N.
      那你就自己写一个吧
      2019-11-15
      回复
    查看更多(1)
登录 后发表内容
问题标签