一、Demo结构

先看效果图吧

结构是这样的：程序主界面包含两个 tab：主页和我的，主页又包含两个tab：最热和最新；我的也包含两个tab：电影和音乐。

关系图如下：

项目 主页 最热 最新 我的 电影 音乐

二、开始撸代码

再看代码结构

两种页面结构

小程序的页面分为两种：page 和 components。

page就是普通的页面， components是小程序为实现模块化而提供的自定义组件。

相同点：

都由四个文件：.js、.json、.wxml、.wxss、构成，.wxml、.wxss写法完全相同。

不同点：

components要在json文件中注明："component": true

js文件的结构和生命周期函数不同

下面是自动生成的page和components代码，可以感受下

page 的 js 代码

本例中每个 tab 都是一个小程序中定义的 component,只有最外层包裹的 myapp 是 page，因为page中只能嵌入component，component中也可以嵌入component。

代码解析

先看myapp，这是程序的主界面。它包含了两个tab：home 和 mine，分别对应页面下方的 主页 和 我的。

要引入自定义组件需要在 myapp.json文件中声明：

现在，就可以在 myapp.wxml 文件中愉快的引用了

主页 我的

tab切换的原理是根据 wx:if 或者 hidden 来控制视图的显示和隐藏，页面的data中设置一个变量currentTab来记录当前点击的是哪个tab，每次点击的时候更新currentTab的值。

切换tab的方法：

这里有几个需要注意的点：

这里判断相等用了 == 而不是 === ，因为通过 e.currentTarget.dataset.current取到的值是字符串类型的，也就是给 data 设置的值是字符串的0和1，如果用 === 就会判断出错。当然也可以强转成数字类型的，我比较懒~

控制组件显示隐藏可以用 wx:if 也可以用 hidden。两者是区别是如果用 wx:if ，每次切换tab的时候组件都会重新渲染，生命周期方法会重新调用执行。而用 hidden则不会重新渲染，生命周期函数也不会重新调用。

具体用哪个看业务需求了，贴一段官方的描述：

再看主页home，它本身是一个component，又包含了两个component ：最热hot 和 最新new。

同样需要在home.json中注册这两个组件

注意home本身是一个component，所以需要注明"component": true

布局文件 home.wxml

js文件 home.js

给两个tab的view设置了id属性值为tableft和tabright，设置了id后就可以用e.currentTarget.id获取到当前点击的是哪个元素了。

其他几个页面的代码都大同小异，主要是判断当前点击的是哪个tab，然后根据currentTab判断该显示或隐藏哪个组件。

源码地址：

总结