高仿瑞幸小程序 02 创建 Tabbar

用户头像
曾伟@喵先森
关注
发布于: 2020 年 05 月 04 日
高仿瑞幸小程序 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



发布于: 2020 年 05 月 04 日 阅读数: 261
用户头像

曾伟@喵先森

关注

与码共舞 2018.03.26 加入

我在浪尖浪,哪管它是前浪还是后浪。

评论

发布
暂无评论
高仿瑞幸小程序 02  创建Tabbar