「微信小程序踩坑记1」自定义tabbar

写在前面

我在上学期就开始做一款学校用的小程序，就是课表那些，无奈如上一篇文章所说的代码丢失，那个小程序的源码就正正好好丢失了，半个月的成果，好不容易涨到每天超过1000人使用，因为代码丢失没法更新换学期，于是截至3月19日每天最高不到150人访问。

当然，小程序是重写了的，这次就没有像之前那样，借鉴另外一款小程序的其中一个UI组件，然后自己设计UI，这次使用了Vant Weapp，这个用的是微信小程序自定义组件，所以与之相关的坑就接踵而至，今天先说一下这个tabber。

Vant Weapp tabber的使用

根据文档，这个tabber图标的切换用的是一个acitve变量，所以我们可以单独放一个页面，最底部50px用作tabber的位置，然后上面的部分用来放其子页面。

有了这么一个思路，我们就将子页面都按照自定义组件来用，把当前active的页面显示出来，其他的隐藏。

具体操作

我们假设页面的容器和tabber单独的页面放在根目录，并命名为index，所以我们在index.json通过如下代码引入

"usingComponents": {
  "van-tabbar": "path/to/@vant/weapp/dist/tabbar/index",
  "van-tabbar-item": "path/to/@vant/weapp/dist/tabbar-item/index"
}

然后就是tabber的框架，我们预留了50px，并且置于最顶层（如果有遮罩层之类的可能需要另外考虑层级）

<view style="height:50px">
  <van-tabbar active="{{ activeIndex }}" z-index="2" bind:change="onChange">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="tosend">课程表</van-tabbar-item>
    <van-tabbar-item icon="orders-o">公告</van-tabbar-item>
    <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
  </van-tabbar>
</view>

然后就是子页面的容器了

<view class='wrapper' style='margin-bottom:50px;'>
  <page0 wx:if='{{activeIndex == 0}}' bind:topage="topage"></page0>
  <page1 wx:if='{{activeIndex == 1}}'></page1>
  <page2 wx:if='{{activeIndex == 2}}'></page2>
  <page3 wx:if='{{activeIndex == 3}}'></page3>
</view>

上面的page0，page1就是子页面的component-tag-name了，也需要在index.json里面声明，注意：这里的usingComponents需要和上面的合并

"usingComponents": {
    "page0": "../pages/index/index",
    "page1": "../pages/classtable/classtable",
    "page2": "../pages/notice/notice",
    "page3": "../pages/setting/setting"
  }

最后就是在tabber上的bind:change和类似于page0上的bind:topage="topage"了

bind:change是用于切换页面的，容易理解；bind:topage是为了在子页面来切换页面，也算一个坑，这里也说一下

onChange(event) {
    // event.detail 的值为当前选中项的索引
    if (event.detail == this.data.activeIndex) return;
    this.setData({
      activeIndex: event.detail
    })
  }

topage(event) {
    // console.log(e.detail)
    this.onChange(event)
  }

那个在子页面切换页面的在子页面中如下实现

this.triggerEvent("topage", 1)

最后

感觉微信小程序就是个无底洞，各种坑，自定义组件、只能异步请求等等。

我这个解决方法只是其中一种，并不是最好的解决方法。