高仿瑞幸小程序 02 创建 Tabbar

小程序是工具，服务于社群。公众号是自媒体，两者结合才能发挥最大作用。幸运的是，现在它们已经打通了的。

在这一篇教程中，我们要完成以下几件事。

1 学会使用 Tabbar 组件

2 学会创建 components

一 学习 Tabbar 组件的使用

导入了 Vant 组件库后，让我们马上来应用一下。我们可以在 home 页面下引入 Tabbar 组件。Tabbar 起到底部导航的作用，一般来讲，有几个大的模块，就会有几个 Tabbar 标签。效果如下 

在小程序中，引用第三方组件其实很简单。大概分为两步。

1 在页面的 json 文件中配置第三方组件的引用

2 在 wxml 中调用。

有时我们也可以直接在,js 文件中 import，然后直接用它。

好了，下面的环节是我们今天的这篇文章的最后一部分，如何使用 Tabbar。通过观察可得，底部会有 5 个标签，分别是：”首页“，”菜单“，”订单“，”购物车“和”我的“

所以我们首先需要准备的是图标文件。由于瑞幸的小程序底部的 Icon 是由线框和实底两种风格组成。所以我们需要准备十张图片。当然，我们也可以使用 Iconfront，但不在本次的教学范围之内。

我们将准备好的图片放入 images 文件夹中。带 select 后缀的标示为选中后显示的图标。 

这些图片我将会放到 github 上，以供大家使用。

接着我们打开 home.json 文件进行组件的引用。

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

做好组件引用之后，我们就要在 home.wxml 中进行调用了。先来看一下完整的代码（其实我建议直接跳过去看分析，一般来讲，大段贴代码都是为了混字数）：

<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item name="home">
<image slot="icon" src="../../images/home.png" mode="aspectFit" style="width: 30px; height: 18px;" />
<image slot="icon-active" src="../../images/home_select.png" mode="aspectFit" style="width: 30px; height: 18px;" />
首页
</van-tabbar-item>
<van-tabbar-item name="menu">
<image slot="icon" src="../../images/menu.png" mode="aspectFit" style="width: 30px; height: 18px;" />
<image slot="icon-active" src="../../images/menu_select.png" mode="aspectFit" style="width: 30px; height: 18px;" />
菜单
</van-tabbar-item>
<van-tabbar-item name="order">
<image slot="icon" src="../../images/order.png" mode="aspectFit" style="width: 30px; height: 18px;" />
<image slot="icon-active" src="../../images/order_select.png" mode="aspectFit" style="width: 30px; height: 18px;" />
订单</van-tabbar-item>
<van-tabbar-item name="cart">
<image slot="icon" src="../../images/cart.png" mode="aspectFit" style="width: 30px; height: 18px;" />
<image slot="icon-active" src="../../images/cart_select.png" mode="aspectFit" style="width: 30px; height: 18px;" />
购物车</van-tabbar-item>
<van-tabbar-item name="my">
<image slot="icon" src="../../images/my.png" mode="aspectFit" style="width: 30px; height: 18px;" />
<image slot="icon-active" src="../../images/my_select.png" mode="aspectFit" style="width: 30px; height: 18px;" />
我的</van-tabbar-item>
</van-tabbar>

我们可以很明了的看到，整个 Tabbar 由“van-tabbar”和“van-tabbar-item”组成。我们先来看“van-tabbar-item”我们这里使用到了 vant 强大的自定义的能力。在默认情况下，tabbar-item 的是酱紫使用的

<van-tabbar-item icon=“home-o">标签</van-tabbar-item>

由于我们是自定义图标，所以我们要在 van-tabbar-item 把 icon 属性去掉。同时加入 image 组件用 slot 这个关键字来描述我们要自定义的部位。例如在我们的项目中，我们用 slot=“icon"定义了未选中的图标，用 slot=“icon-active”定义了选中的图标。还有一点需要注意的是，我们 image 标签下 src 的属性。这里使用的是当前文件（home.wxml）的相对路径大家想一下../../images/home.png 是不是指向当前文件（home.wxml）的，上一级，再上一级的 images 目录下的 home.png 文件？这个概念很重要，在我们的组件引入也会用到。大家要用心体会。

当我们完成页面的搭建后，我们就要来做一些交互了。比如选中 van-tabbar-item 的时候，图标会进行切换，同时展示不同的界面。这一切，就要跟 home.js 文件进行交互了。在小程序的框架中，wxml 和 js 文件的绑定是默认的，只要是同名文件就好。

那么如何进行选中图标的切换呢？我们要使用 van-tabbar 中 active 属性进行指定。那么如何做呢？我们注意到 tabbar-item 中有个 name 属性，例如“首页”的 name 属性是“home”，所以当我们把 home 做为值赋予 active 属性是，界面上就显示了被选中的图标。

我们可以 active=“home”和 active=“menu”体验一下。当然，这不能满足我们的需求。我们的需求是，active 的值要根据我们点选的 item 而进行改变。所以，我们要把 active 绑定到一个变量上。如下

active=“{{ active }}”

在 wxml 绑定 js 中的变量，我们需要使用双大括号{{ }} 而变量名，则写在 js 文件的 data 对象中。如下：

data: {
    active:"home"
},

完成这步，我们要做的就是动态的改变 active 的值了。所以我们这里要用到事件和 js 文件中的函数进行绑定。

bind:change=“onChange"

看语法，每次 item 的点击，都会触发 change 事件，所以我们只要跟 onChange 函数绑定即可。在这里我们只需写上函数名，然后在 js 文件中进行实现。

而在 onChange 函数中，我们要做什么呢？我们只需要把 item 的 name 赋值给变量 active。怎么做到这点呢？很巧的事，change 事件携带的参数 e，有一个属性 detail 正好对应上 name 属性。于是我们的代码可以这么写

onChange:function(e){
    console.log(e.detail)
    this.setData({
      active:e.detail
    })
},

注意最后一个大括号后面的逗号”,”，如果函数插在 js 文件中间的话，这个必不可少。好了，至此，我们就完成了 Tabbar 标签图标的切换。

我们今天要做的最后一块内容是，做 5 个界面组件，随着 item 的切换进行切换。

二 学会创建组件

也很简单，分三步：

1 创建组件

2 引入组件

3 代码其控制显示

我们在 pages/home 路径下创建 components 文件夹，用来存放不同的组件。我们先在 components 下创建 home 文件夹，再右键点击 home 文件夹，选择“新建 Component” 

命名为 home，这时候就会在 home 文件夹下生成四个文件，这四个文件和我们之前在 pages 创建的页面意义是一样的。至此，我们就完成了 home 组件的创建，接着我们再依次创建 menu，my，order，cart 四个组件。具体界面暂时先不用写。我们先完成界面切换的互动。

还记得我们是怎么引入组件的吗？对咯，在 json 文件中。所以我们打开 pages/home 目录下的 home.json 文件。这里要注意，有两个 home，不要打开 components 目录下的 home。

引入我们创建的组件

"usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
    "tabbar_home":"./components/home/home",
    "tabbar_menu":"./components/menu/menu",
    "tabbar_order":"./components/order/order",
    "tabbar_cart":"./components/cart/cart",
    "tabbar_my":"./components/my/my"
  }

tabbar_home 等 key 是我们自定义的标签名，它的 value 则是组件存放的相对路径。”./”标示从当前目录开始算起。大家要注意，这是相对路径。当我们依次设定好 tabbar_menu，tabbar_order，tabbar_cart，tabbar_my 之后 ，我们就要回到 wxml 中构建界面了。

由于标签化后，我们可以直接在 home.wxml 中使用组件标签。

<tabbar_home />
<tabbar_menu  />
<tabbar_order  />
<tabbar_cart  />
<tabbar_my />

但此时，我们创建的五个组件都显示在界面上。我们希望的是，当我们点击不同的 item 的时候，会切换到不同组件。那么我们该如何控制呢？其实也不复杂，我们依然要利用变量 active 进行控制。在小程序中，我们可以使用 wx:if 来做简单的逻辑控制。所以，当 active 的值为 home 时，我们要显示 tabbar_home 该怎么做呢？代码为

wx:if="{{active == 'home'}}" 

这就表示了，除非 active 的值为 home，否则 tabbar_home 标签就不会显示。这里有个简单的逻辑转换，这种颠过来倒过去的逻辑造成了很多人觉得程序猿很难沟通，而程序猿早就习以为常。好了，当我们完成以下代码时，我们就完成了不同组件的切换。

<tabbar_home wx:if="{{active == 'home'}}" />
<tabbar_menu wx:if="{{active == 'menu'}}" />
<tabbar_order wx:if="{{active == 'order'}}" />
<tabbar_cart wx:if="{{active == 'cart'}}" />
<tabbar_my wx:if="{{active == 'my'}}" />

于是乎，我们今天的内容就结束了。下一章节，我们来搭建一下“首页”的内容。

对了，我把代码放到了 github 上

https://github.com/gogoswift/luckin