由于微信小程序原生并不支持动态的底部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，前端小程序动态渲染。
前端小程序效果
