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

用户7162790

发布于 2022-03-23 14:16:37

4020

发布于 2022-03-23 14:16:37

文章被收录于专栏：森屿暖树

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)

最后

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

小程序

javascript

容器

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

小程序

javascript

容器

登录后参与评论

0 条评论

热度