离子视图一个固定的,一个滚动部分

时间:2015-08-24 02:23:07

标签: ionic-framework ionic

好的,所以我有以下代码:



<ion-view hide-back-button="true", title="Test">
  <ion-content>
    <ion-slide-box>
      <ion-slide>
        <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/7/79/2001_BMW_Z3_Sideview_Topdown_Topaz_Blue_2.5i.jpg">
      </ion-slide>
      <ion-slide>
        <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/2/2e/BMW_Z3_1.9L_1998.jpg">
      </ion-slide>
      <ion-slide>
        <img style="width: 100%" src="http://www.bmwblog.com/wp-content/uploads/bmw-z3-black.jpg">
      </ion-slide>
    </ion-slide-box>
    <div class="bar bar-dark">
      <h1 class="title">Feed</h1>
    </div>
    <ion-list style="padding: 1px;">
      <ion-item ng-repeat="test in tests" href="#/detail/{{work.id}}">
        <br>
        <br>
        <h2>{{test.name}}</h2>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
&#13;
&#13;
&#13;

我希望列表独立于视图的其余部分滚动,并且滚动条上方没有任何东西滚动 - 即我希望它们被修复。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:3)

简单修复,只需使用两个离子卷:在此处查看:http://play.ionic.io/app/85e2270b0b33

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
      <ion-view hide-back-button="true", title="Test">
  <ion-scroll>
    <ion-slide-box>
      <ion-slide>
        <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/7/79/2001_BMW_Z3_Sideview_Topdown_Topaz_Blue_2.5i.jpg">
      </ion-slide>
      <ion-slide>
        <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/2/2e/BMW_Z3_1.9L_1998.jpg">
      </ion-slide>
      <ion-slide>
        <img style="width: 100%" src="http://www.bmwblog.com/wp-content/uploads/bmw-z3-black.jpg">
      </ion-slide>
    </ion-slide-box>
    <div class="bar bar-dark">
      <h1 class="title">Feed</h1>
    </div>
  </ion-scroll>
    <ion-scroll style="height: 500px">
      <ion-list>
        <ion-item>
          Hello
        </ion-item>
        <ion-item>
          Hello
        </ion-item>
        <ion-item>
          Hello
        </ion-item>
        <ion-item>
          Hello
        </ion-item>
        <ion-item>
          Hello
        </ion-item>
        <ion-item>
          Hello
        </ion-item>
        <ion-item>
          Hello
        </ion-item>
        <ion-item>
          Hello
        </ion-item>
        <ion-item>
          Hello
        </ion-item>
        <ion-item>
          Hello
        </ion-item>
      </ion-list>
    </ion-scroll>
  </ion-view>
  </body>
</html>