根据文档,这个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:chang
e是用于切换页面的,容易理解;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)
感觉微信小程序就是个无底洞,各种坑,自定义组件、只能异步请求等等。
我这个解决方法只是其中一种,并不是最好的解决方法。