Ionic-底部tab栏注意事项

最新推荐文章于 2022-12-21 12:18:48 发布
最新推荐文章于 2022-12-21 12:18:48 发布
阅读量1.8k 收藏
点赞数
分类专栏： android

www/index.html作为我们的程序入口文件，首先编辑这个文件，在body标签中加入

<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-nav-bar</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"bar-positive"</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-nav-back-button</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-nav-back-button</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-nav-bar</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-nav-view</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-nav-view</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

ion-nav-bar是导航页面头部、ion-nav-view是导航内容页面。inde.html入口页面我们已经写完了，接下来我们新建两个我们自己的页面。我们在www目录下新建一个templates文件夹，存放我们的页面并新建页面：tabs.html 作为我们tab应用的主页面：

tabs.html

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>ion<span class="hljs-attribute" style="box-sizing: border-box;">-tabs</span> class<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"tabs-icon-top tabs-positive"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>

  <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>ion<span class="hljs-attribute" style="box-sizing: border-box;">-tab</span> title<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Home"</span> icon<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ion-home"</span> href<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#/tab/home"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>
    <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>ion<span class="hljs-attribute" style="box-sizing: border-box;">-nav</span><span class="hljs-attribute" style="box-sizing: border-box;">-view</span> name<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"home-tab"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">><</span>/ion<span class="hljs-attribute" style="box-sizing: border-box;">-nav</span><span class="hljs-attribute" style="box-sizing: border-box;">-view</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>
  <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>/ion<span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>
  <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>ion<span class="hljs-attribute" style="box-sizing: border-box;">-tab</span> title<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"About"</span> icon<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ion-ios-information"</span> href<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#/tab/about"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>
    <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>ion<span class="hljs-attribute" style="box-sizing: border-box;">-nav</span><span class="hljs-attribute" style="box-sizing: border-box;">-view</span> name<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"about-tab"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">><</span>/ion<span class="hljs-attribute" style="box-sizing: border-box;">-nav</span><span class="hljs-attribute" style="box-sizing: border-box;">-view</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>
  <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>/ion<span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>

<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>/ion<span class="hljs-attribute" style="box-sizing: border-box;">-tabs</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

ion-tab为tab应用的底部菜单项 title是菜单按钮显示的文字，icon是菜单按钮图标，href是点击菜单的跳转地址，子元素ion-nav-view是点击菜单后子页面显示的位置，ion-nav-view属性name为该tab的名称，后面添加子页面会详细描述。

然后在app.js中加入该页面的路由

<code class="hljs perl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$stateProvider</span>
      .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">state</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'tabs'</span>, {
          url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/tab"</span>,
          templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"templates/tabs.html"</span>,
      })
<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$urlRouterProvider</span>.otherwise(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/tab"</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

保存之后页面会自动刷新显示的应该是介个样子： 
介个样子 
哈，我们tab应用的大概样子已经出来了，但是现在点击下面的菜单并没有什么反应，接下来我们就要开始添加我们的子页面了，在templates文件夹中新建：home.html、facts.html、about.html 
home.html 首页

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">view-title</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Home"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"padding"</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"button icon icon-right ion-chevron-right"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#/tab/facts"</span>></span>Scientific Facts<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

facts.html

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">view-title</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Facts"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"padding"</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"button icon icon-right ion-chevron-right"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#/tab/home"</span>></span>Home<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

about.html

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">view-title</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"About"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"padding"</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
        About Us
      <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

ion-view是我们子页面的内容，属性view-title可以设置页面头部的标题名称，添加好文件后我们需要在app.js中加入各个页面的路由，并且需要对之前的tabs路由做一个调整。

<code class="hljs perl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$stateProvider</span>
      .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">state</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'tabs'</span>, {
          url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/tab"</span>,
          abstract: true,
          templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"templates/tabs.html"</span>,
      })
      .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">state</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'tabs.home'</span>, {
          url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/home"</span>,
          views: {
            <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'home-tab'</span>: {
              templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"templates/home.html"</span>
            }
          }
      })
      .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">state</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'tabs.facts'</span>, {
          url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/facts"</span>,
          views: {
            <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'home-tab'</span>: {
              templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"templates/facts.html"</span>
            }
          }
      })
      .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">state</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'tabs.about'</span>, {
          url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/about"</span>,
          views: {
            <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'about-tab'</span>: {
              templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"templates/about.html"</span>
            }
          }
      })


   <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$urlRouterProvider</span>.otherwise(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/tab/home"</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li></ul>

大家发现tabs路由增加了一个abstract字段，该字段在angular中的解释是抽象页面，不能独立作为页面展示只能作为其他页面父页面，当加载子页面之前加载父页面。 
其他子页面的路由和tabs路由的配置有所不同名称命名是父路由.子路由的形式，并且增加了一个views字典，字段的key值对应着我们前面所说的tabs.html中ion-nav-view的name属性，表示该路由跳转的页面属于某个tab的子页面，同时修改我们的otherwise默认页为/tab/home。 
保存之后浏览器自动刷新，我们来看一下效果。 
介个样子

原文：http://blog.csdn.net/i348018533/article/details/47258449


zqh1260684341
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cordova-plugin-ionic-webview:用于Cordova的Web View插件，专门用于Ionic应用程序
05-04
科尔多瓦的Ionic Web View 适用于Cordova的Web View插件，专注于为Ionic应用程序提供最高性能体验（但可与任何Cordova应用程序一起使用）。 该插件在iOS上使用WKWebView，在Android上使用最新的常绿webview。 此外，此插件使Web开发人员期望使用HTML5样式路由轻松构建单页应用程序。 注意：此存储库及其文档适用于cordova-plugin-ionic-webview @ 5.x ，它使用的新功能可能不适用于所有应用程序。 请参阅和 2.x文档可以在找到。 :open_book: 文档： : :megaphone: 支持/问题？ 有关常规支持问题，请参见我们的。 GitHub上的问题应保留用于错误报告和功能请求。 :sparkling_heart: 想要贡献吗？ 请参阅 。 配置 该插件具有几个可在config.xml设置的配置选项。 Android和iOS偏好设置 适用于iOS和
ionic隐藏底部tab菜单
liuguochao1024的博客
11-01 827
 
ionic关于隐藏底部tabs终极解决方案
Sapphire521的博客
12-21 560
网上看到很多都是写个指令，监听view进出对tab进行显示隐藏，试过挺多个，自己写了一个，都不是太让人满意，问题大多数为： 1、二级页面是隐藏了tab，但是进去三级视图发现tab又出来了 2、三级，四级view隐藏了tab，但是返回键的时候tab一秒后又跑了出来 参考国外资料，如果只要在首页的几个页面中显示tab，其他页面不显示，建议用下面的方式，很好用，直观，明了 控制器里面写 .controller('TabsCtrl', function($scope, $rootScope, $state
ionic2/ionic3自由隐藏底部tab栏---让ionic3自己解决！手把手教程
沛雯的博客
11-28 5090
最近用ionic3和angular4做APP，其中有个需求：用户无论在哪个页面只要超时了就弹界面要求用户输入PIN码。这时候必须是覆盖整个页面，除非PIN码正确否则其他内容都是disable的。（jq的方法在本文讨论之外） 写好了密码组件，发现弹框的时候底部的tab栏依然存在。。。 网上查到了隐藏底部tab栏的三种方法/终极方法等等，但仍然做不到随意的隐藏和显示， 这时跟我搭配的
关注Ionic底部导航按钮tabs在android情况下浮在上面的处理
xyphf的博客
12-19 2641
Ionic是一款流行的移动端开发框架，但是刚入门的同学会发现，Ionic在IOS和android的底部tabs显示不一样。在安卓情况下底部tabs会浮上去。 如下图展示： 网上也有很多此类的解决方案，但是我觉得说一千道一万都不如给个dome实在，下面附上解决方案的dome，大家可以看看！<!DOCTYPE html> <html ng-app="ionic"> <head> <meta
ionic4自定义tabs导航栏（一）
yw00yw的博客
07-03 2655
在ionic4项目中，使用ionic start myApp tabs可以新建自带tab切换，但是更多时候我们想自定义tab切换，自定义项目目录结构。 1. 新建一个空白项目 ionic start ionic-demo03 blank 2. 在pages文件夹下新建一个tabs页面 ionic g page pages/tabs 3. 在tabs页面目录下创建tabs.router.mod...
ionic中键盘把tabs顶上去的解决方法（android）
li00828的博客
10-23 4073
在android中ionic的键盘会把tabs顶上去的解决方法 在github上找到的解决方法，解决了我遇到的问题，发出来希望能帮到更多的人。 https://github.com/ionic-team/ionic/issues/7047 在tab.ts中 具体的page.ts 具体就是在tab.ts中封装一个event事件，用来隐藏t
Ionic Tab选项卡使用整理（一）
天马3798
02-06 5647
一、Ionic CSS布局控制 指定 样式风格：tabs-positive，tabs-assertive 指定 选择风格：tabs-striped 带条风格，tabs-standard 不带条风格（默认值） 指定背景、前景色：tabs-background-positive，tabs-color-light 指定位置：tabs-top,tabs-bottom(默认值) 指定图标类型：ta
ionic-datepicker-oysq
06-02
这是一个封装好的ionic日期选择器，下载解压，点击date.html即可查看效果。
ionic-cache：具有IndexedDB，SQLite和WebSQL支持的Ionic和Angular缓存服务
02-20
离子缓存服务 离子缓存服务，可以缓存几乎所有内容。 它缓存请求，可观察，承诺和经典数据...npm install ionic-cache @ionic/storage --save 或纱线： yarn add ionic-cache @ionic/storage 您可以选择添加 。 并
ngx-ionic-image-viewer：一个Ionic 4 Angular组件，用于查看和缩放图像和照片，而无需任何其他依赖项
01-30
ngx-ionic-image-viewer 一个Ionic 4 Angular模块，用于查看和缩放图像和照片，而无需任何其他依赖项。演示版|总览先决条件离子> = 4.0.0 角度> = 8.0.0安装npm install --save ngx-ionic-image-viewer用法进口导入...
ionic-emoji-picker：适用于Ionic 3的Emoji选择器
02-05
离子3表情符号选择器该项目是由创建的 项目安装通过NPM安装模块npm i ionic-emoji-picker --save将其导入到您应用的模块中在应用程序的主模块中导入EmojiPickerModule.forRoot() app.module.ts import { ...
ionic3之tabs用法详解
热门推荐
阿龙的博客
01-29 1万+
[root] Page 指定tab希望加载的页面 tabTitle string tab上显示的标题 tabIcon string tab上显示的图标 tabBadge string tab上显示的角标数字 tabBadgeStyle string 角标数字的颜色 enabled boolean tab是否可用，默认为tru
ionic 二级页面隐藏自带的底部导航
woshishen87的博客
07-17 693
这篇记录在有tabs的项目里，进入子层级时，底部导航还一直存在，本人是要让他只在首页几个界面存在，其他的隐藏，在这里用到了AngularJS的指令，要完成这个步骤分为三步 1.在标签ion-tabs中添加：ng-class=”{‘tabs-item-hide’: $root.hideTabs}”，源码如下： ion-tabs class="tabs-icon-top" ng
ionic 开发遇到的bug
ZillahV06的博客
03-30 299
1、禁止ionic-content上下滚动：.scroll-content { overflow: hidden; }2、设置状态栏颜色：   1、安装插件：Install the Cordova and Ionic Native plugins:$ ionic cordova plugin add cordova-plugin-statusbar $ npm insta...
jedis示例代码压缩包
最新发布
04-23
jedis示例代码
ionic-vue打包apk
10-11
要打包 Ionic-Vue 应用程序的 APK，需要遵循以下步骤： 1. 在项目根目录下执行以下命令安装 Cordova-Android 插件：`npm install [email protected] --save-dev` 2. 添加 Android 平台：`ionic capacitor add ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值