【小程序】自定义TabBar遇到的问题_vue3微信小程序自定义tabbar以及闪烁问题

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>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

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>
   1
   2

   js

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

   wxss

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

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

官方的自定义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": "我的"
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

注意：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
  })
}
1
2
3
4
5
6
7
8

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
    })
  }
},
1
2
3
4
5
6
7
8
9

在每个显示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
      // })
    }
1
2
3
4
5
6
7
8