微信小程序 Tabbar 自定义+vant 组件

项目背景 ---小程序+vant Tabbar组件

与页面不一样的是，Component中的构造函数（也可以称构造器）是Component({})，而页面中的构造函数是Page({})。

1.创建pages同级目录文件--- custom-tab-bar

custom-tab-bar/index.js 
custom-tab-bar/index.json 
custom-tab-bar/index.wxml 
custom-tab-bar/index.wxss 

文件名必须一致 -- 有个小技巧 --在app.json 中的pages 写一条路由就可以生成文件夹

2.. 配置信息

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
• 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

{
  "tabBar": {
    "custom": true,  // 关键
    "list": [{ // tabber 页面
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

custom-tab-bar/index.json

{
  "component": true
}

3.渲染

<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}">   // vant 中的Tabbar
  <van-tabbar-item 
    wx:for="{{list}}"  // 数据
    data-path="{{item.pagePath}}"  // 自定义属性 --- 跳转的路径
    data-path="{{index}}" // 当前下标
    wx:key="index" 
    icon="{{item.icon}}" 
    bind:tap="skipfn"  // 点击之后调用事件
  >
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

\

4.跳转页面

在 methods 对象中写方法调用

Component({
  data: {
    list: [{
      // 这个格式要注意 写成和 tabbar 一致路由报错
      "pagePath": "../index/index",  // 格式 index/index 是pages下面的文件中的WXML
      "text": "首页",
      "icon": "home-o"
    }]
  },
  methods: {
    skipfn(event) {
      const data = event.currentTarget.dataset // 获取标签上的自定义属性
      const url = data.path // 获取添加的路径
      wx.switchTab({
        url
      })
    },
  },
})

wx.switchTab({ url })

这个方法只能跳转 tabBar 注册过的页面 就是 app.json 中 tabBar 下的 list数组中的路由

在插件中使用时，只能在当前插件的页面中调用

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

效果

待续---- 问题：如果跳转路由并且改变高亮颜色页面会更新两次 第一次有高亮跳转的相应路由，第二次高亮恢复原状路由跳转到相应路由----- 小菜鸟正在爬坡中