多图标选项卡+侧边栏滑动导航菜单【原创】

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入必要的CSS样式文件和JS文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/ionic.css">
<script type="text/javascript" src="js/ionic.bundle.js"></script>
<script type="text/javascript" src="js/collide.js"></script>

页面的body部分，用了多个script在需要时加载对应的页面模板，代码如下：

<script id="templates/browse.html" type="text/ng-template">
  <ion-view view-title="浏览">
    <ion-content>
      <h1>浏览</h1>
    </ion-content>
  </ion-view>
</script>
<script id="templates/menu.html" type="text/ng-template">
  <ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
      <ion-nav-bar class="bar-stable">
        <ion-nav-back-button>
        </ion-nav-back-button>
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
          </button>
        </ion-nav-buttons>
      </ion-nav-bar>
      <!--选项卡-->
      <ion-tabs>
        <ion-tab title="Search" icon-off="ion-search" icon-on="ion-search" href="#/app/search">
          <ion-nav-view name="tab-search"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Browse" icon-off="ion-ios-glasses" icon-on="ion-ios-glasses" href="#/app/browse">
          <ion-nav-view name="tab-browse"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Playlist" icon-off="ion-ipod" icon-on="ion-ipod" href="#/app/playlists">
          <ion-nav-view name="tab-playlists"></ion-nav-view>
        </ion-tab>
      </ion-tabs>
    </ion-side-menu-content>

     <!--左侧滑动菜单-->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-stable">
        <h1 class="title">左侧滑动菜单</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <ion-item menu-close href="#/app/search">
            搜索
          </ion-item>
          <ion-item menu-close href="#/app/browse">
            浏览
          </ion-item>
          <ion-item menu-close href="#/app/playlists">
            播放列表
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>
  </ion-side-menus>
</script>
<script id="templates/playlist.html" type="text/ng-template">
  <ion-view view-title="播放列表">
    <ion-content>
      <h1>播放列表</h1>
    </ion-content>
  </ion-view>
</script>
<script id="templates/playlists.html" type="text/ng-template">
  <ion-view view-title="多图标选项卡+侧边栏滑动导航菜单">
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
          {{playlist.title}}
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-view>
</script>
<script id="templates/search.html" type="text/ng-template">
  <ion-view view-title="搜索">
    <ion-content>
      <h1>搜索</h1>
    </ion-content>
  </ion-view>
</script>
<ion-nav-view></ion-nav-view>

页面的底部，需引入一个JS文件，代码如下：

<script type="text/javascript" src="js/index.js"></script>