飞腿
飞腿
  • 发布:1 天前
  • 更新:1 天前
  • 阅读:24

使用uni-app实现小程序动态底部TabBar

分类:uni-app

由于微信小程序原生并不支持动态的底部TabBar,但是我们有些场景需要这个功能。那么可以采用变通的方式实现。

1、首先需要知道uniapp或者说微信小程序有什么样的限制

性能问题,在uni-app的vue版本上,自定义tabbar让您不得不在一个webview内模拟出多个页面,这存在严重的性能问题
要使用原生tabbar,在pages.json文件里面必须有tabBar节点,节点里面的pagePath必须在pages节点里面存在,并且路径上不能有参数。

2、针对这些限制做什么样的变通
这里我使用了uView里面的u-tabbar组件。
pages节点里面增加了5个页面

"pages": [{  
            "path": "pages/feitui/tab1/tab1",  
            "style": {  
                "enablePullDownRefresh": true  
            }  
        },{  
            "path": "pages/feitui/tab2/tab2",  
            "style": {  
                "enablePullDownRefresh": true  
            }  
        },  
        {  
            "path": "pages/feitui/tab3/tab3",  
            "style": {  
                "enablePullDownRefresh": true  
            }  
        },  
        {  
            "path": "pages/feitui/tab4/tab4",  
            "style": {  
                "enablePullDownRefresh": true  
            }  
        },  
        {  
            "path": "pages/feitui/tab5/tab5",  
            "style": {  
                "enablePullDownRefresh": true  
            }  
        }]

tabBar节点里面把这5个路径都加进去,如下:

"tabBar": {  
        "color": "#7A7E83",  
        "selectedColor": "#3cc51f",  
        "borderStyle": "black",  
        "backgroundColor": "#ffffff",  
        "list": [{  
            "pagePath": "pages/feitui/tab1/tab1",  
            "text": "tab1"  
        }, {  
            "pagePath": "pages/feitui/tab2/tab2",  
            "text": "tab2"  
        }, {  
            "pagePath": "pages/feitui/tab3/tab3",  
            "text": "tab3"  
        }, {  
            "pagePath": "pages/feitui/tab4/tab4",  
            "text": "tab4"  
        }, {  
            "pagePath": "pages/feitui/tab5/tab5",  
            "text": "tab5"  
        }]  
    }

tab1--tab5这5个页面里都引用content.vue组件,在Content组件里面引用<u-tabbar>组件,并动态的从后端获取tabBar的list数据,通过参数控制是否显示tabbar,显示哪些tabItem 通过tab1--tab5插入不同的tab标识,获取每个tab需要呈现的页面内容。具体代码可参考 飞腿编辑器前端项目模板

3、最终实现效果
通过后台的在线编辑TabBar,前端小程序动态渲染。
后台编辑

前端小程序效果
小程序

0 关注 分享

要回复文章请先登录注册