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

拾忆
2020-10-13 / 0 评论 / 125 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年02月11日,已超过168天没有更新,若内容或图片失效,请留言反馈。

请输入图片描述

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>

上面的 page0page1就是子页面的 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)

最后

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

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

2

评论 (0)

取消