小程序最近是越来越火了……
做小程序有一段时间了，总结一下项目中遇到的问题及解决办法吧。
项目中有个多 tab 嵌套的需求，进入程序主界面下面有两个 tab，进入A模块后，A模块最底下又有多个tab，每个tab上又嵌了2-4个不等的tab。。。
这种变态需求只能自定义tab了。
其实如果项目不是很复杂，没有多tab嵌套的需求，完全可以用小程序官方的 tabBar，方便快捷。
官方 tabBar 地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
一、Demo结构
先看效果图吧
结构是这样的：程序主界面包含两个 tab：主页和我的，主页又包含两个tab：最热和最新；我的也包含两个tab：电影和音乐。
关系图如下：
项目
主页
最热
最新
我的
电影
音乐二、开始撸代码
再看代码结构
两种页面结构
小程序的页面分为两种： page 和 components 。
page 就是普通的页面， components 是小程序为实现模块化而提供的自定义组件。
相同点：
都由四个文件： .js 、 .json 、 .wxml 、 .wxss 、构成， .wxml 、 .wxss 写法完全相同。
不同点：
components要在json文件中注明："component": true
{
"component": true,
"usingComponents": {
"movie": "movie/movie",
"music": "music/music"
}
}-
js文件的结构和生命周期函数不同下面是自动生成的
page和components代码，可以感受下
page 的 js 代码
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})component 的 js 代码
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})本例中每个 tab 都是一个小程序中定义的 component , 只有最外层包裹的 myapp 是 page ，因为 page 中只能嵌入 component ， component 中也可以嵌入 component 。
代码解析
先看 myapp ，这是程序的主界面。它包含了两个 tab ： home 和 mine ，分别对应页面下方的 主页 和 我的 。
要引入自定义组件需要在 myapp.json 文件中声明：
{ "usingComponents":{ "home": "./home/home", "mine":
"./mine/mine" } }现在，就可以在 myapp.wxml 文件中愉快的引用了
<view class='container'>
<view class='content'>
<view wx:if='
{{currentTab == 0}}'>
<home/> </view>
<view wx:if='
{{currentTab == 1}}'>
<mine/> </view>
</view> <!-- 下面的两个tab --> <view class='bottom-tab'>
<view class='tab-item
{{currentTab == 0 ? "active" : ""}}' data-current="0" bindtap='switchTab'>
<image src='
{{currentTab == 0 ? "../../assets/home_active.png" : "../../assets/home.png"}}' class='item-img'></image>
<text class='item-text'>主页
</text> </view>
<view class='tab-item
{{currentTab == 1 ? "active" : ""}}' data-current="1" bindtap='switchTab'>
<image src='
{{currentTab == 1 ? "../../assets/mine_active.png" : "../../assets/mine.png"}}' class='item-img'></image>
<text class='item-text'>我的
</text> </view>
</view> </view>
tab切换的原理是根据 wx:if 或者 hidden 来控制视图的显示和隐藏，页面的 data 中设置一个变量 currentTab 来记录当前点击的是哪个tab，每次点击的时候更新 currentTab 的值。
切换tab的方法：
switchTab(e) {
this.setData({ currentTab: e.currentTarget.dataset.current });
}这里有几个需要注意的点：
- 这里判断相等用了
==而不是===，因为通过e.currentTarget.dataset.current取到的值是字符串类型的，也就是给data设置的值是字符串的0和1，如果用===就会判断出错。当然也可以强转成数字类型的，我比较懒~ - 控制组件显示隐藏可以用
wx:if也可以用hidden。两者是区别是如果用wx:if，每次切换tab的时候组件都会重新渲染，生命周期方法会重新调用执行。而用hidden则不会重新渲染，生命周期函数也不会重新调用。
具体用哪个看业务需求了，贴一段官方的描述：
再看主页 home ，它本身是一个 component ，又包含了两个 component ：最热 hot 和 最新 new 。
同样需要在 home.json 中注册这两个组件
{ "component": true, "usingComponents": {
"hot": "hot/hot", "new": "new/new" } }注意 home 本身是一个 component ，所以需要注明 "component": true
布局文件 home.wxml
<view class='container'>
<view class=
'tab-wrapper'> <view id=
'tableft' class='tab-left {{currentTab === 0 ? "tab-active":""}}' bindtap='switchTab'>最热</view>
<view id=
'tabright' class='tab-right {{currentTab === 1 ? "tab-active" : ""}}' bindtap='switchTab'>最新</view>
</view>
<view class='content-wrapper' wx:if=
'{{currentTab === 0}}'><hot/>
</view> <view class=
'content-wrapper' wx:if='{{currentTab === 1}}'><new/>
</view> </view>js文件 home.js
Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据
*/ data: { currentTab: 0 }, /** * 组件的方法列表 */ methods: { switchTab(e) { console.log(e)
let tab = e.currentTarget.id if (tab === 'tableft') { this.setData({ currentTab: 0 }) } else if (tab === 'tabright')
{ this.setData({ currentTab: 1 }) } } } })给两个 tab 的 view 设置了 id 属性值为 tableft 和 tabright ，设置了id后就可以用 e.currentTarget.id 获取到当前点击的是哪个元素了。
其他几个页面的代码都大同小异，主要是判断当前点击的是哪个 tab ，然后根据 currentTab判断该显示或隐藏哪个组件。
源码地址： https://github.com/cachecats/mini-multi-tab
