极乌客

一个个人的小博客。

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

写在前面

我在上学期就开始做一款学校用的小程序,就是课表那些,无奈如上一篇文章所说的代码丢失,那个小程序的源码就正正好好丢失了,半个月的成果,好不容易涨到每天超过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>

上面的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)

最后

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

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

Oops!我换回了WordPress

上一篇

WordPress配合腾讯云CDN的一个坑

下一篇
评论
发表评论 说点什么
    • 嘿嘿,小程序先是地推,然后在一些群里发二维码,之后就自然发展了。 可能是主题的问题,我有空去问问主题作者