小程式tabBar跳轉頁面並隱藏tabBar

C1103發表於2019-03-04
tabBar

前言

在開發小程式過程中，相信有一部分人，遇到過一個問題：當使用tabBar跳轉頁面時，所跳轉的頁面下方必定有 tabBar顯示，而當你需要把它隱藏時，卻束手無策。話不多說，在這裡給大家分享如何隱藏tabBar的方法。

方法一:自定義tabBar

使用自定義tabBar，新建一個tarBar.wxml模板頁，然後引用模板的頁面傳入資料即可，程式碼如下：

<template name="tabBar">  
  <view class="flex-h" style="color: {{tabBar.color}}; background: {{tabBar.backgroundColor}}; {{tabBar.position==`top`? `top: 0` : `bottom: 0`}}; {{tabBar.borderStyle? (tabBar.position==`top`? `border-bottom: solid 1px `+tabBar.borderStyle + `;` : `border-top: solid 1px `+tabBar.borderStyle + `;`) : ``}}">  
  <block wx:for="{{tabBar.list}}" wx:key="pagePath">  
    <navigator url="{{item.pagePath}}" open-type="{{item.pageTum}}" class="menu-item" style="{{item.active? `color: `+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ``}}">  
      <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}"></image>  
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}"></image>  
      <text>{{item.text}}</text>  
    </navigator>  
    </block>  
  </view>  
</template>   
複製程式碼

接下來是在index.js的配置物件：

tabBar:{
    "color": "#9E9E9E",
    "selectedColor": "#f00",
    "backgroundColor": "#fff",
    "borderStyle": "#ccc",
    "list":[{
            "pagePath": "/pages/index/index",
            "text": "主頁",
            "iconPath": "../../images/index.png",
            "selectedIconPath": "../../images/index_active.png",
            "pageTum": "redirect",
            "selectedColor": "#4EDF80",
            active: true
            },
            {
            "pagePath": "/pages/tum/tum",
            "text": "其他",
            "iconPath": "../../images/pageTum.png",
            "pageTum": "navigate",
            "selectedColor": "#4EDF80",
            active: false
            },
            {
            "pagePath": "/pages/mine/mine",
            "text": "我的",
            "iconPath": "../../images/mine.png",
            "selectedIconPath": "../../images/mine_active.png",
            "pageTum": "redirect",
            "selectedColor": "#4EDF80",
            active: false
            }],
            "position": "bottom"
    }
}
複製程式碼

在這裡要注意的是，active表示該頁面是否被選中，pageTum表示點選該頁面跳轉方式，‘其他’這個頁面不用設定tabBar，並且它的pageTum的值是navigate，表示點選‘其他’跳轉的頁面就不會顯示tabBar。

index.wxml引入模板：

<import src="../template/tabBar.wxml" />  
<template is="tabBar" data="{{tabBar: tabBar}}" /> 
<text>主頁面</text>    //顯示內容
複製程式碼

然後在mine頁面也一樣配置資料把active的值改為true，引入模板。效果如下：

小程式tabBar跳轉頁面並隱藏tabBar

方法二：使用中間頁面跳轉

使用原生tabBar跳轉至一級頁面，再利用周期函式onShow的特性直接跳轉到我們需要看到的頁面，並且在返回時使用wx.swicthTab跳轉至程式設計所需的一級頁面。下面來看一看實現方法：

首先在app.json中設定tabBar

 "tabBar": {
        "color": "#9E9E9E",
        "selectedColor": "#f00",
        "backgroundColor": "#fff",
        "borderStyle": "#ccc",
        "list": [{
                "pagePath": "pages/index/index",
                "text": "主頁",
                "iconPath": "images/index.png",
                "selectedIconPath": "images/index_active.png"
            },
            {
                "pagePath": "pages/tum/pageTum",
                "text": "其他",
                "iconPath": "images/pageTum.png"
            },
            {
                "pagePath": "pages/mine/mine",
                "text": "我的",
                "iconPath": "images/mine.png",
                "selectedIconPath": "images/mine_active.png"
            }
        ]
    }
複製程式碼

在‘其他’這個頁面中設定跳轉頁面為一箇中間過渡頁面pageTum，然後利用pageTum的周期函式onShow跳轉至無tabBar的二級頁面tum，返回時就能直接返回至主頁面，程式碼如下：

    data: {
        num: 0,
    },
    onLoad: function() {},
    onShow: function() {
        this.data.num++;
        if (this.data.num % 2 == 0) {
            wx.switchTab({
                url: `../index/index`
            });
        } else {
            wx.navigateTo({
                url: `./tum`
            })
        }
    }
複製程式碼

實現效果

小程式tabBar跳轉頁面並隱藏tabBar

如果有錯誤或者其他的方法，希望可以指出和交流，謝謝！

相關文章