Question

我一直在玩拆分视图，并开始查看路由。我想设置一个“主要布局”splitview，然后使用路由在运行时将各种视图注入其中，如此Plunk。

所以，在布局视图（layout.html）中，我有

<ion-side-menus>
<ion-side-menu-content>
    <ion-header-bar class="bar-positive">
       <h1 style="text-align: left" class="title">Main</h1>
    </ion-header-bar>
    <ion-content >
        <!-- Inject Main view here -->
        <ion-nav-view name='main'></ion-nav-view>
    </ion-content>

</ion-side-menu-content>

<ion-side-menu width=200 expose-aside-when='(min-width:300px)'>
    <ion-header-bar class="bar-royal">
        <h1 style="text-align: left" class="title">Options</h1>
    </ion-header-bar>
    <ion-content>
      <!-- Inject Side options vew here -->
      <ion-nav-view name='options'></ion-nav-view>
    </ion-content>
</ion-side-menu>

路线在script.js ...

中设置

app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
 .state('view1', {
   url: '/',
   views: {
      'main': {
       templateUrl: 'mainv1.html'
     },
     'options': {
        templateUrl: 'optionsv1.html'
     },      
   }
   });

    $urlRouterProvider.otherwise('/');
   });

视图似乎很好，但我似乎松开了splitview中的滚动条（请参阅右侧视图，其中我添加了100个<div>元素。

任何人都知道是否有办法执行上述操作并使垂直滚动有效？

提前感谢您的帮助！

Answer 1

只需在 mainv1.html 中添加ion-scroll指令：

<div ng-controller='main'>
  <ion-scroll zooming="true" direction="xy" style="height: 100%;">
    <div ng-repeat='d in data'>{{d}}</div>
  </ion-scroll>
</div>

Working plunker

Ionic：将视图注入splitview时，松散的垂直滚动条

1 个答案: