在開(kāi)發(fā)小程序過(guò)程中,相信有一部分人,遇到過(guò)一個(gè)問(wèn)題:當使用tabBar跳轉頁(yè)面時(shí),所跳轉的頁(yè)面下方必定有 tabBar顯示,而當你需要把它隱藏時(shí),卻束手無(wú)策。話(huà)不多說(shuō),在這里給大家分享如何隱藏tabBar的方法。
方法一:自定義tabBar
使用自定義tabBar,新建一個(gè)tarBar.wxml模板頁(yè),然后引用模板的頁(yè)面傳入數據即可,代碼如下:
<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>
接下來(lái)是在index.js的配置對象:
tabBar:{ "color": "#9E9E9E", "selectedColor": "#f00", "backgroundColor": "#fff", "borderStyle": "#ccc", "list":[{ "pagePath": "/pages/index/index", "text": "主頁(yè)", "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表示該頁(yè)面是否被選中,pageTum表示點(diǎn)擊該頁(yè)面跳轉方式,‘其他’這個(gè)頁(yè)面不用設置tabBar,并且它的pageTum的值是navigate,表示點(diǎn)擊‘其他’跳轉的頁(yè)面就不會(huì )顯示tabBar。
index.wxml引入模板:
<import src="../template/tabBar.wxml" /> <template is="tabBar" data="{{tabBar: tabBar}}" /> <text>主頁(yè)面</text> //顯示內容
然后在mine頁(yè)面也一樣配置數據把active的值改為true,引入模板。效果如下:
方法二:使用中間頁(yè)面跳轉
使用原生tabBar跳轉至一級頁(yè)面,再利用周期函數onShow的特性直接跳轉到我們需要看到的頁(yè)面,并且在返回時(shí)使用wx.swicthTab跳轉至程序設計所需的一級頁(yè)面。下面來(lái)看一看實(shí)現方法:
首先在app.json中設置tabBar
"tabBar": { "color": "#9E9E9E", "selectedColor": "#f00", "backgroundColor": "#fff", "borderStyle": "#ccc", "list": [{ "pagePath": "pages/index/index", "text": "主頁(yè)", "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" } ] }
在‘其他’這個(gè)頁(yè)面中設置跳轉頁(yè)面為一個(gè)中間過(guò)渡頁(yè)面pageTum,然后利用pageTum的周期函數onShow跳轉至無(wú)tabBar的二級頁(yè)面tum,返回時(shí)就能直接返回至主頁(yè)面,代碼如下:
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' }) } }
實(shí)現效果
如果有錯誤或者其他的方法,希望可以指出和交流,謝謝!