您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
小程序tabBar跳轉頁面并隐藏tabBar
發表時間:2021-3-31
發布人:葵宇科技
浏覽次數:98
在開發小程序過程中(zhōng),相信有一部分人,遇到過一個(gè)問(wèn)題:當使用tabBar跳轉頁面時,所跳轉的頁面下(xià)方必定有 tabBar顯示,而當你(nǐ)需要把它隐藏時,卻束手無策。話不多說,在這裡給大家分享如(rú)何隐藏tabBar的方法。
方法一:自定義tabBar
使用自定義tabBar,新建一個(gè)tarBar.wxml模闆頁,然後引用模闆的頁面傳入數據即可(kě),代碼如(rú)下(xià):
<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>
接下(xià)來是在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表示該頁面是否被選中(zhōng),pageTum表示點擊該頁面跳轉方式,‘其他’這個(gè)頁面不用設置tabBar,并且它的pageTum的值是navigate,表示點擊‘其他’跳轉的頁面就不會顯示tabBar。
index.wxml引入模闆:
<import src="../template/tabBar.wxml" />
<template is="tabBar" data="{{tabBar: tabBar}}" />
<text>主頁面</text> //顯示内容
然後在mine頁面也一樣配置數據把active的值改為true,引入模闆。效果如(rú)下(xià):
方法二:使用中(zhōng)間頁面跳轉
使用原生tabBar跳轉至一級頁面,再利用周期函數onShow的特性直接跳轉到我們需要看到的頁面,并且在返回時使用wx.swicthTab跳轉至程序設計所需的一級頁面。下(xià)面來看一看實現方法:
首先在app.json中(zhōng)設置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"
}
]
}
在‘其他’這個(gè)頁面中(zhōng)設置跳轉頁面為一個(gè)中(zhōng)間過渡頁面pageTum,然後利用pageTum的周期函數onShow跳轉至無tabBar的二級頁面tum,返回時就能直接返回至主頁面,代碼如(rú)下(xià):
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'
})
}
}
實現效果
如(rú)果有錯誤或者其他的方法,希望可(kě)以指出和(hé)交流,謝謝!