Web开发学习笔记:ionic组件ion-tabs选项卡切换效果实例

转载自:https://www.jb51.net/article/91381.htm

 

介绍

ion-tabs是ionic中的选项卡组件，路由使用的是angular-ui-router.js。因此必须先掌握uiRoute。

效果图

实例代码

index.html

tab-index.html

 

config.js

.state("tabs", {

 url: "/tabs",

 templateUrl : "templates/tab/tab-index.html",

 controller : "tabs"

})



.state("tabs.home", {

 url: "/home",

 views : {

 "tab-home" : {

  templateUrl : "templates/home/home.html"

 }

 }

})

.state("tabs.taobao", {

 url: "/taobao",

 views : {

 "tab-taobao" : {

  templateUrl : "templates/taobao/taobao.html"

 }

 }

})

.state("tabs.user", {

 url: "/user",

 views : {

 "tab-user" : {

  templateUrl : "templates/user/user.html"

 }

 }

})

 

接着就可以分别在home.html taobao.html user.html 下编写各个选项卡的内容

例如:

home.html

 首页







 



 



 

 

注意：不要将ion-tabs置入一个ion-content元素内；它会造成一定的已知CSS错误。