自定义tabBar

144 阅读1分钟

1.app.jons

 "tabBar": {
         //开启自定义tabBar
        "custom": true,
        // 此处照常写,但是不会显示
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "消息"
            },
            {
                "pagePath": "pages/logs/logs",
                "text": "搜索"
            },
            {
                "pagePath": "pages/home/home",
                "text": "我的"
            }
        ]
 }

2.创建tabBar组件

  • 正常的组件,不过命名必须像下面一样
/custom-tab-bar/index.js
/custom-tab-bar/index.json
/custom-tab-bar/index.wxml
/custom-tab-bar/index.wxss

3. 使用MobX作为tabBar组件的数据

  • 每次切换页面都会初始tabBar
  • 如果tabBar绑定的响应式数据是私有的,那么切换页面数据就会初始化
  • 使用使用MobX定义全局数据供tabBar组件使用