как добавить директиву ion scroll в div?

Я пытаюсь реализовать этот пример в ionic framework, вот код, который я пытаюсь реализовать http://plnkr.co/edit/LjAoAPFDx0eVPkx3dKfu?p=preview. В котором в dom присутствует только шесть элементов в любой ситуации. Я пытаюсь реализовать то же самое в ионном фреймворке, но он не добавлен в мой div. Зачем ?

как добавить ионную прокрутку в это ?? чтобы происходила плавная прокрутка.

вот мой плункер моей демонстрации http://plnkr.co/edit/WJcbpkqJvzmMWXrg8WpH?p=preview< /а>

Можем ли мы добавить туда ионную прокрутку?

  <ion-scroll>
  <div vs-repeat class="repeater-container">
    <div ng-repeat="item in items" class="item">
      {{item.text}}
    </div>
  </div>
  </ion-scroll>

ionic-framework angularjs angularjs-directive angularjs-scope ionic
person user944513    schedule 11.06.2015    source источник
comment
кажется, что в вашем коде нет ничего плохого. что вы подразумеваете под ion-scroll не добавляется??? {{item.text}} отображается на экране??   -  person vdj4y    schedule 11.06.2015

Ответы (2)


arrow_upward
0
arrow_downward

Если вы хотите отобразить определенное количество элементов за раз в списке, вы можете использовать повтор коллекции, а затем просто установить высоту элемента на высоту контейнера div, а затем разделить на шесть. Что-то похожее на это. Я использовал высоту окна, но некоторые идеи. HTML:

<!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-pane ng-controller="main">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content class="padding">
       <div class="list">
         <div class="item" collection-repeat="item in thisArray" item-height="height"></div>
       </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

JS:

angular.module('app', ['ionic']);

angular.module('app').controller('main', function($scope){
  $scope.thisArray = [];

  for(x=0; x<100; x++){
  $scope.thisArray.push(x);
  }

  $scope.height = screen.height/9;

})
person Jess Patton    schedule 11.06.2015
comment
когда вы изменяете высоту элемента, это изменит количество элементов, отображаемых в представлении в любое время. - person Jess Patton; 11.06.2015
comment
число произвольное. Если вы хотите показать 9 элементов, вы делите на 9, 6 на 6. - person Jess Patton; 16.05.2016

arrow_upward
0
arrow_downward

кажется, что в вашем коде нет ничего плохого. что вы подразумеваете под ion-scroll не добавляется??? {{item.text}} отображается на экране? Возможно, он пустой?

если частичные представления не отображаются, вам необходимо сначала объявить ion-view в качестве родительского элемента в каждом частичном представлении,

index.html

<html>
  <body ng-app="sampleApp">
    <ion-nav-view></ion-nav-view>
  </body>
</html>

partialview1.html

<ion-view>
  <ion-scroll>
    <div>
      //more content
    </div>
  </ion-scroll>
</ion-view>
person vdj4y    schedule 11.06.2015