【小程序】自定义TabBar遇到的问题

1. template（模板） 进行自定义tabBar
   微信小程序模板 传送门
   a. 在每个使用template的页面都要导入模板，并初始化模板，且样式也需要导入。

   1. 文件位置
      

   2. wxml文件中内容

      <template name="tabbar">
          <cover-view class="bottomTabbar">
              <cover-view class="tabbarWidth"> 
                  <cover-view class="tabbarMenu" wx:for="{{TabbarMenu.list}}" wx:key="index" >
                      <navigator  data-index="{{index}}"  data-path="{{item.pagePath}}" open-type="redirect" url="{{item.pagePath}}">
                          <cover-image class="image" src="{{TabbarMenu.selected === index ? item.selectedIconPath : item.iconPath}}" style="width: 35px; height: 35px;" />
                          <cover-view class="tabbarText" style="color: {{TabbarMenu.selected === index ? TabbarMenu.selectedColor : TabbarMenu.color}}">{{item.text}}</cover-view>
                          <!-- <cover-view class="tabbarText" style="color: {{selected === index ? selectedColor : color}}">{{index}}{{selected}}</cover-view> -->
                      </navigator>
                  </cover-view>
              </cover-view>
          </cover-view>
      </template>
      

   3. json文件中 “component”: true,

   4. js文件要设置显示tabBar内容与图标（与官方的自定义tabBar一致）

   5. 显示tabBar的page这样配置
      wxml

      <import src="/template/tabbar/index"></import>
       <template is="tabbar" data="{{TabbarMenu:TabbarMenu}}"></template>
      

      js

      // initial tabbar menu
      let tabbarMenuJs = require("../../../template/tabbar/index")
      tabbarMenuJs.tabbarData.InitTabbarMenu(0,this)
      // 0 为激活对应page在tabBar中的下标。
      

      wxss

      @import "/template/tabbar/index.wxss";
      

   【问题】快速点击菜单，出现反应慢的问题。
   b. 单页面应用的方式（不知道会不会对性能产生影响）。
   没有尝试。

2. 官方的自定义tabBar 传送门
   a. 首先， 注意自定义tabBar的文件位置 ------ 为项目的根目录
   b. 然后， app.json 中进行配置。 配置如下：

   "tabBar": {
       "custom": true,
       "color": "#7A7E83",
       "selectedColor": "#3cc51f",
       "borderStyle": "black",
       "backgroundColor": "#ffffff",
       "list": [
           {
               "pagePath": "pages/homeIndex/homeIndex",
               "iconPath": "/img/icon-map/tabbar/icon_tab_home_unsel.png",
               "selectedIconPath": "/img/icon-map/tabbar/icon_tab_home_sel.png",
               "text": "首页"
           },
           {
               "pagePath": "pages/communityIndex/communityIndex",
               "iconPath": "/img/icon-map/tabbar/icon_tab_community_unsel.png",
               "selectedIconPath": "/img/icon-map/tabbar/icon_tab_community_sel.png",
               "text": "社区"
           },
           {
               "pagePath": "pages/mallIndex/mallIndex",
               "iconPath": "/img/icon-map/tabbar/icon_tab_shop_unsel.png",
               "selectedIconPath": "/img/icon-map/tabbar/icon_tab_shop_sel.png",
               "text": "商城"
           },
           {
               "pagePath": "pages/otcIndex/otcIndex",
               "iconPath": "/img/icon-map/tabbar/icon_tab_soucha_unsel.png",
               "selectedIconPath": "/img/icon-map/tabbar/icon_tab_soucha_sel.png",
               "text": "搜茶"
           },
           {
               "pagePath": "pages/myIndex/myIndex",
               "iconPath": "/img/icon-map/tabbar/icon_tab_my_unsel.png",
               "selectedIconPath": "/img/icon-map/tabbar/icon_tab_my_sel.png",
               "text": "我的"
           }
       ]
   }
   

   注意：tabbar的配置不影响 “pages” 和 “subpackages”的配置，lists中的page是要展示tabBar的page。
   c. 之后，在custom-tab-bar文件夹中js文件要配置与app.json 几乎一致的信息（可参考官方的代码片段）。
   d. custom-tab-bar文件夹中js文件,切换tabBar page的函数

   switchTab(e) {
     const data = e.currentTarget.dataset
     const url = data.path
     wx.switchTab({ url})
     this.setData({
        selected: data.index
     })
   }
   

   e. 跳转时，路径错误问题。
   若跳转的时候出现页面路径前出现多余的路径，就在custom-tab-bar中js文件中的pagePath的数据前加上 " / "就可以了.
   f. 激活状态不准确问题

     activeTabBar(currentMenu) {
       console.log("激活菜单的首页:", currentMenu)
       if (typeof this.getTabBar === 'function' && this.getTabBar()) {
       this.getTabBar().setData({
           // 当前页面的 tabBar 索引
           selected: currentMenu
       })
     }
   },
   

   在每个显示tabBar page中的 生命周期show中调用activeTabBar(currentMenu)函数，currentMenu的值对应当前页在tabBar中的下标位置。
   注意，函数activeTabBar函数必须写在要显示tabBar的page中，提取出来无效。
   g. tabBar闪烁问题
   把custom-tab-bar文件夹中js文件,修改switchTab函数，即可。

   switchTab(e) {
         const data = e.currentTarget.dataset
         const url = data.path
         wx.switchTab({ url})
         // this.setData({
         //    selected: data.index
         // })
       }