Ionic创建的tabs程序更改tab位置的三种方法及对比

用ionic创建的tabs程序，在最新版本中android和ios上的位置已经一致了，都是在最下面，那么如何更改tabs的位置在顶部呢？

 

下面为大家讲三个方法。

 

方法一：更改配置文件

 

打开src/app/app.module.ts文件，参照以下代码，把tabsPlacement配置项添加上

@NgModule({
declarations: [MyApp],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
tabsPlacement: 'top'
})
],
bootstrap: [IonicApp],
entryComponents: [MyApp],
providers: []
})

更改完配置，启动服务，然后在浏览器中预览就可以看到位置已经更改了。

 

方法二：在tabs标签处增加属性。

更改src/pages/tabs/tabs.html文件，增加tabPlacement='top'

'

方法三：直接在网址链接中添加“?ionicTabsPlacement=top”即可。

 

在浏览器中输入http://localhost:8100/?ionicTabsPlacement=top，打开网页看就可以看tabs置顶了。

 

总结：个人比较推荐第二种方法，在调试以及工作中更改属性都会找到相应的页面去查找。第一种方法是全局的属性配置，会对全局起作用。第三种的应用场景不太适合在APP中不需要输入网址浏览的场景。

 

如果觉得写的不错，可以打赏哦，您的支持是我一直努力的动力！