腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

微信小程序自定義tab實(shí)現(xiàn)多層tab嵌套功能

更新時(shí)間：2018年06月15日 09:01:35 作者：solo

微信小程序非?；鸨?，今天腳本之家小編給大家?guī)?lái)的微信小程序自定義tab實(shí)現(xiàn)多層tab嵌套功能以及項(xiàng)目中遇到的問(wèn)題及解決方法，感興趣的朋友一起看看吧

小程序最近是越來(lái)越火了……

做小程序有一段時(shí)間了，總結(jié)一下項(xiàng)目中遇到的問(wèn)題及解決辦法吧。

項(xiàng)目中有個(gè)多 tab 嵌套的需求，進(jìn)入程序主界面下面有兩個(gè) tab，進(jìn)入A模塊后，A模塊最底下又有多個(gè)tab，每個(gè)tab上又嵌了2-4個(gè)不等的tab。。。

這種變態(tài)需求只能自定義tab了。

其實(shí)如果項(xiàng)目不是很復(fù)雜，沒(méi)有多tab嵌套的需求，完全可以用小程序官方的 tabBar，方便快捷。
官方 tabBar 地址：https://developers.weixin.qq....

一、Demo結(jié)構(gòu)

先看效果圖吧

結(jié)構(gòu)是這樣的：程序主界面包含兩個(gè) tab：主頁(yè)和我的，主頁(yè)又包含兩個(gè)tab：最熱和最新；我的也包含兩個(gè)tab：電影和音樂(lè)。

關(guān)系圖如下：

項(xiàng)目
    主頁(yè)
        最熱
        最新
    我的
        電影
        音樂(lè)

二、開(kāi)始擼代碼

再看代碼結(jié)構(gòu)

兩種頁(yè)面結(jié)構(gòu)

小程序的頁(yè)面分為兩種：page 和 components。

page就是普通的頁(yè)面， components是小程序?yàn)閷?shí)現(xiàn)模塊化而提供的自定義組件。

相同點(diǎn)：

都由四個(gè)文件：.js、.json、.wxml、.wxss、構(gòu)成，.wxml、.wxss寫(xiě)法完全相同。

不同點(diǎn)：

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

{
 "component": true,
 "usingComponents": {
  "movie": "movie/movie",
  "music": "music/music"
 }
}

js文件的結(jié)構(gòu)和生命周期函數(shù)不同

下面是自動(dòng)生成的page和components代碼，可以感受下

page 的 js 代碼

Page({
 /**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 data: {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
  */
 onLoad: function (options) {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
  */
 onReady: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
  */
 onShow: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
  */
 onUnload: function () {
 },
 /**
  * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 頁(yè)面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function () {
 },
 /**
  * 用戶(hù)點(diǎn)擊右上角分享
  */
 onShareAppMessage: function () {
 }
})
component 的 js 代碼
Component({
 /**
  * 組件的屬性列表
  */
 properties: {
 },
 /**
  * 組件的初始數(shù)據(jù)
  */
 data: {
 },
 /**
  * 組件的方法列表
  */
 methods: {
 }
})

本例中每個(gè) tab 都是一個(gè)小程序中定義的 component , 只有最外層包裹的 myapp 是 page，因?yàn)閜age中只能嵌入component，component中也可以嵌入component。

代碼解析

先看myapp，這是程序的主界面。它包含了兩個(gè)tab：home 和 mine，分別對(duì)應(yīng)頁(yè)面下方的主頁(yè) 和我的。

要引入自定義組件需要在 myapp.json文件中聲明：

{
 "usingComponents":{
  "home": "./home/home",
  "mine": "./mine/mine"
 }
}

現(xiàn)在，就可以在 myapp.wxml 文件中愉快的引用了

<view class='container'>
 <view class='content'>
  <view wx:if='{{currentTab == 0}}'>
   <home/>
  </view>
  <view wx:if='{{currentTab == 1}}'>
   <mine/>
  </view>
 </view>
 <!-- 下面的兩個(gè)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'>主頁(yè)</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切換的原理是根據(jù) wx:if 或者 hidden 來(lái)控制視圖的顯示和隱藏，頁(yè)面的data中設(shè)置一個(gè)變量currentTab來(lái)記錄當(dāng)前點(diǎn)擊的是哪個(gè)tab，每次點(diǎn)擊的時(shí)候更新currentTab的值。

切換tab的方法：

switchTab(e) {
  this.setData({ currentTab: e.currentTarget.dataset.current });
}

這里有幾個(gè)需要注意的點(diǎn)：

這里判斷相等用了 == 而不是 === ，因?yàn)橥ㄟ^(guò) e.currentTarget.dataset.current取到的值是字符串類(lèi)型的，也就是給 data 設(shè)置的值是字符串的0和1，如果用 === 就會(huì)判斷出錯(cuò)。當(dāng)然也可以強(qiáng)轉(zhuǎn)成數(shù)字類(lèi)型的，我比較懶~

控制組件顯示隱藏可以用 wx:if 也可以用 hidden。兩者是區(qū)別是如果用 wx:if ，每次切換tab的時(shí)候組件都會(huì)重新渲染，生命周期方法會(huì)重新調(diào)用執(zhí)行。而用 hidden則不會(huì)重新渲染，生命周期函數(shù)也不會(huì)重新調(diào)用。

具體用哪個(gè)看業(yè)務(wù)需求了，貼一段官方的描述：

再看主頁(yè)home，它本身是一個(gè)component，又包含了兩個(gè)component ：最熱hot 和最新new。

同樣需要在home.json中注冊(cè)這兩個(gè)組件

{
 "component": true,
 "usingComponents": {
  "hot": "hot/hot",
  "new": "new/new"
 }
}

注意home本身是一個(gè)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: {
 },
 /**
  * 組件的初始數(shù)據(jù)
  */
 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 })
   }
  }
 }
})

給兩個(gè)tab的view設(shè)置了id屬性值為tableft和tabright，設(shè)置了id后就可以用e.currentTarget.id獲取到當(dāng)前點(diǎn)擊的是哪個(gè)元素了。

其他幾個(gè)頁(yè)面的代碼都大同小異，主要是判斷當(dāng)前點(diǎn)擊的是哪個(gè)tab，然后根據(jù)currentTab判斷該顯示或隱藏哪個(gè)組件。

源碼地址：

https://github.com/cachecats/...

總結(jié)

以上所述是小編給大家介紹的微信小程序自定義tab實(shí)現(xiàn)多層tab嵌套功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: