PhoneGap中文网

标题: 怎么样让页面显示在Tabs下方？ [打印本页]
作者: gufeilong    时间: 2016-5-30 17:31
标题: 怎么样让页面显示在Tabs下方？
初学，务怪！
就是想用ionic实现Android 或者IOS的tab页的效果，让要显示的页面在tab标签也的下面显示，我现在的情况是总是直接跳到那个页面上！下面是代码：
tab页
  1. <ion-view hide-nav-bar="true" hide-back-button="false" ng-controller="registerContrl">
  2.   <ion-header-bar>
  3.     <div class="tabs tabs-striped">
  4.       <a class="tab-item active" ng-click="toRegisterShop()">
  5.         店铺注册
  6.       </a>
  7.       <a class="tab-item" ng-click="toRegisterShop()">
  8.         店员注册
  9.       </a>
  10.     </div>

  12.   </ion-header-bar>
  13.   <!--
  14.   <ion-nav-bar class="bar-positive">
  15.     <ion-nav-back-button></ion-nav-back-button>

  17.   </ion-nav-bar>
  18. -->
  19.   <ion-nav-view></ion-nav-view>
  20. </ion-view>
复制代码
子页面


  3.   <!--<div class="scroll-content has-header"> -->
  4.   <ion-content overflow-scroll="true">
  5.   <div class="list list-inset card">
  6.         <div class="item item-input item-divider">
  7.           <span class="input-label">店铺信息</span>
  8.         </div>
  9.         <div class="item item-input item-input-inset">
  10.           <span class="input-label">所属单位</span>
  11.           <input type="text" placeholder="所属单位">
  12.         </div>
  13.         <div class="item item-input item-input-inset">
  14.           <span class="input-label">经营范围</span>
  15.           <input type="text" placeholder="经营范围">
  16.         </div>
  17.         <div class="item item-input item-input-inset">
  18.           <span class="input-label">门店名称</span>
  19.           <input type="text" placeholder="门店名称">
  20.         </div>
  21.         <div class="item item-input item-input-inset">
  22.           <span class="input-label">联系电话</span>
  23.           <input type="text" placeholder="联系电话">
  24.         </div>
  25.         <div class="item item-input item-input-inset">
  26.           <span class="input-label">备注</span>
  27.           <input type="text" placeholder="备注">
  28.         </div>

  30.         <div class="item item-input item-input-inset">
  31.           <span class="input-label">门店照片</span>
  32.           <input type="text" placeholder="门店照片">
  33.         </div>
  34.         <div class="item item-input item-input-inset">
  35.           <span class="input-label">营业执照</span>
  36.           <input type="text" placeholder="营业执照">
  37.         </div>

  39.         <div class="item item-input  item-divider">
  40.           <span class="input-label">店主信息</span>
  41.         </div>
  42.         <div class="item item-input item-input-inset">
  43.           <span class="input-label">门店名称</span>
  44.           <input type="text" placeholder="门店名称">
  45.         </div>
  46.         <div class="item item-input item-input-inset">
  47.           <span class="input-label">联系电话</span>
  48.           <input type="text" placeholder="联系电话">
  49.         </div>
  50.         <div class="item item-input item-input-inset">
  51.           <span class="input-label">备注</span>
  52.           <input type="text" placeholder="备注">
  53.         </div>
  54.         <div class="item item-input item-input-inset">
  55.           <span class="input-label">帐号</span>
  56.           <input type="text" placeholder="帐号">
  57.         </div>
  58.         <div class="item item-input item-input-inset">
  59.           <span class="input-label">密码</span>
  60.           <input type="text" placeholder="密码">
  61.         </div>
  62.         <div class="item item-input item-input-inset">
  63.           <span class="input-label">姓名</span>
  64.           <input type="text" placeholder="姓名">
  65.         </div>
  66.         <div class="item item-input item-input-inset">
  67.           <span class="input-label">身份证信息</span>
  68.           <input type="text" placeholder="身份证信息">
  69.         </div>
  70.         <div class="item item-input item-input-inset">
  71.           <span class="input-label">头像</span>
  72.           <input type="text" placeholder="头像">
  73.         </div>
  74.         <div class="item item-input item-input-inset">
  75.           <span class="input-label">联系电话</span>
  76.           <input type="text" placeholder="联系电话">
  77.         </div>
  78.         <div class="item item-input item-input-inset">
  79.           <span class="input-label">家庭住址</span>
  80.           <input type="text" placeholder="家庭住址">
  81.         </div>
  82.         <div class="item item-input item-input-inset">
  83.           <span class="input-label">邮箱</span>
  84.           <input type="text" placeholder="邮箱">
  85.         </div>
  86.         <div class="item item-input item-input-inset">
  87.           <span class="input-label">QQ号</span>
  88.           <input type="text" placeholder="QQ号">
  89.         </div>
  90.         <div class="item item-input item-input-inset">
  91.           <span class="input-label">备注</span>
  92.           <input type="text" placeholder="备注">
  93.         </div>
  94.       </div>
  95.     <button class="button button-positive button-full">保存</button>

  97.     </ion-content>
  98.    <!-- </div> -->

  100. </ion-view>
复制代码
请帮忙看看！
作者: 落幕离场    时间: 2016-5-30 17:35
http://ionicframework.com/docs/components/#striped-style-tabs



欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2