问题描述
在My ionic 3应用程序中,从侧栏导航时,选项卡栏消失。所有其他页面都工作正常。仅当从侧边栏布线时,选项卡才消失。
这是我的app.html
<ion-menu [content]="content" type="overlay">
<ion-content class="menubar">
<ion-list class="mainmenu">
<div class="profile">
<ion-row>
<ion-col col-4><img src="./assets/imgs/wgs-logo.png" alt=""></ion-col>
<ion-col col-8 class="j-c-center" (click)="openLandingPage()">
<ion-icon slot="start" class="landing-page-icon" name="custom-landing-page"></ion-icon>
</ion-col>
</ion-row>
</div>
<ion-item no-lines class="menuitem" *ngFor="let cate of categoryFullData; let i = index;">
<button ion-button clear menuToggle (click)="opencategory(cate.id,cate.categry)">
<img src="{{baseUrlImage}}{{cate.cateimg}}">
<p>{{cate.categry}}</p>
</button>
<ion-icon slot="end" name="ios-arrow-down" class="icon-down-arrow" (click)="menuItemHandler(i)"></ion-icon>
<ion-item-group submenu [class.visible]="showSubmenu[i]">
<ion-item no-lines class="menuitem" *ngFor="let subcate of cate.subcategories; let i = index;">
<button ion-button clear (click)="opencategory(subcate.id,subcate.categry)" menuToggle>
<img src="{{baseUrlImage}}{{subcate.cateimg}}">
<p>{{subcate.categry}}</p>
</button>
</ion-item>
</ion-item-group>
</ion-item>
<ion-item no-lines class="menuitem">
<button ion-button clear menuToggle (click)="openLandingPage()">
<a href="{{baseUrlImage}}admin">Sell</a>
</button>
</ion-item>
<ion-item no-lines class="menuitem">
<button ion-button clear menuToggle (click)="openAboutUs()">
<p>About Us</p>
</button>
</ion-item>
<ion-item no-lines class="menuitem">
<button ion-button clear menuToggle (click)="openTermsAndConditions()">
<p>Terms & Conditions</p>
</button>
</ion-item>
<ion-item no-lines class="menuitem">
<button ion-button clear menuToggle (click)="openPrivacyPolicy()">
<p>Privacy Policy</p>
</button>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
这是我的app.component.ts
import { Component,ViewChild } from '@angular/core';
import { Nav,Platform,App,LoadingController,AlertController,ToastController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { NotificationsPage } from '../pages/notifications/notifications';
import { OrderHistoryPage } from '../pages/order-history/order-history';
import { ContactPage } from '../pages/contact/contact';
import { FeedbackPage } from '../pages/Feedback/Feedback';
import { HomePage } from '../pages/home/home';
import { OffersPage } from '../pages/offers/offers';
import { TermsPage } from '../pages/terms/terms';
import { HkApiproviderProvider } from '../providers/hk-apiprovider/hk-apiprovider';
import { CategoryPage } from '../pages/category/category';
import { LanguageServiceProvider } from '../providers/language-service/language-service';
import { TranslateService } from '@ngx-translate/core';
import { TabsPage } from '../pages/tabs/tabs';
import { ProductsPage } from '../pages/products/products';
import { LandingPage } from '../pages/landing-page/landing-page';
import { PrivacyPage } from '../pages/privacy/privacy';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
validEmail:any;
rootPage: any = TabsPage;
showSubmenu = [];
resposeData: any;
categoryFullData:any;
pages: Array<{title: string,component: any}>;
apptoken = {"token":""};
postData={
"user_id":"","token":"",}
baseUrlImage: any;
itemsuperqty: number;
userDetails: any;
constructor(public platform: Platform,public auth:HkApiproviderProvider,public app:App,public toastCtrl: ToastController,public loadingCtrl:LoadingController,public alertCtrl:AlertController,public statusBar: StatusBar,public splashScreen: SplashScreen,public langserv : LanguageServiceProvider,translate: TranslateService) {
this.initializeApp();
this.apptoken.token = HkApiproviderProvider.gettoken();
localStorage.setItem('appconfig',JSON.stringify(this.apptoken));
langserv.getdefaultlang();
translate.setDefaultLang(langserv.defaultlang);
this.langserv.changelang('en');
this.itemsuperqty = 1;
this.baseUrlImage = auth.getimage();
if(localStorage.getItem('userData')){
const data = JSON.parse(localStorage.getItem('userData'));
this.userDetails = data.userData;
}
this.postData.token = HkApiproviderProvider.gettoken();
this.getcategorydata();
}
/* menuItemHandler(): void {
this.showSubmenu = !this.showSubmenu;
} */
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.backgroundColorByHexString('#307722');
this.splashScreen.hide();
});
}
onclickHome(){
this.nav.setRoot(HomePage,{ tabIndex: 0 });
}
onclickcategory(){
this.nav.push(CategoryPage,{ tabIndex: 0 });
}
onclickMyOrder(){
this.nav.push(OrderHistoryPage,{ tabIndex: 1 });
}
openContact(){
this.nav.push(ContactPage,{ tabIndex: 0 });
}
onclickNoti(){
this.nav.push(NotificationsPage,{ tabIndex: 0 });
}
openFeedback(){
this.nav.push(FeedbackPage,{ tabIndex: 0 });
}
openoffers(){
this.nav.push(OffersPage,{ tabIndex: 0 });
}
openterms(){
this.nav.push(TermsPage,{ tabIndex: 0 });
}
openprivacy(){
this.nav.push(TermsPage,{ tabIndex: 0 });
}
openLandingPage(){
this.nav.push(LandingPage);
}
checkLogin(){
if(localStorage.getItem('userData')){
return true;
}else{
return false;
}
}
menuItemHandler(index): void {
if(this.showSubmenu[index] && this.showSubmenu[index] == false) {
this.showSubmenu[index] = true;
} else if (this.showSubmenu[index] && this.showSubmenu[index] == true) {
this.showSubmenu[index] = false;
} else {
this.showSubmenu[index] = true;
}
}
public getcategorydata()
{
let zest = this.loadingCtrl.create({
content: "Getting Data..",duration:20000,spinner:'crescent'
});
zest.present();
this.auth.postData(this.postData,"getcategory").then((result) => {
this.resposeData = result;
this.categoryFullData = this.resposeData.Data;
//console.log(result);
zest.dismiss();
},(err) => {
zest.dismiss();
});
}
opencategory(category,cname){
this.nav.push(ProductsPage,{
category : category,cname : cname,tabIndex: 1
});
}
openAboutUs() {
this.nav.push(ContactPage);
}
openTermsAndConditions() {
this.nav.push(TermsPage);
}
openPrivacyPolicy() {
this.nav.push(PrivacyPage);
}
}
这是我的tabs.html页面
<ion-tabs>
<ion-tab [root]="tab6Root" class="tab-bar" tabIcon="custom-landing-page">
</ion-tab>
<ion-tab [root]="tab1Root" class="tab-bar" tabIcon="ios-home-outline">
</ion-tab>
<ion-tab [root]="tab2Root" class="tab-bar" tabIcon="ios-person-outline">
</ion-tab>
<ion-tab [root]="tab3Root" class="tab-bar" tabIcon="icon-cart-white" [tabBadge]="cartCounterManager()">
</ion-tab>
<ion-tab [root]="tab4Root" class="tab-bar" tabIcon="ios-heart-outline" [tabBadge]="wishListCounterManager()">
</ion-tab>
<ion-tab [root]="tab5Root" class="tab-bar" tabIcon="ios-search-outline">
</ion-tab>
</ion-tabs>
tabs.component.ts
import { Component } from '@angular/core';
import { ProductSearchPage } from '../product-search/product-search';
import { ProfilePage } from '../profile/profile';
import { HomePage } from '../home/home';
import { CartPage } from '../cart/cart';
import { WishListPage } from '../wishlist/wishlist';
import { NavController,NavParams } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { ProductsPage } from '../products/products';
import { LandingPage } from '../landing-page/landing-page';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = ProfilePage;
tab3Root = CartPage;
tab4Root = WishListPage;
tab5Root = ProductSearchPage;
tab6Root = LandingPage;
selectedindex: Number;
constructor(
public navCtrl: NavController,public navParams: NavParams,){
}
ionViewDidLoad() {
this.selectedindex = this.navParams.get('tabIndex') || 0;
console.log(this.selectedindex)
}
cartCounterManager(){
return HomePage.cartData.length
}
wishListCounterManager(){
return HomePage.wishListData.length
}
}
我尝试了所有可用的方法,但均无效果。请帮忙。每个小小的评论将不胜感激。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)