ngInfiniteScroll не работает должным образом

Question

ngInfiniteScroll не работает должным образом

0

У меня возникли проблемы с началом работы с ngInfiniteScroll. Я создал область под названием фильмы, в которой есть около 150 объектов фильмов с названиями и датами выпуска. Используя ng-repeat, я показываю объекты в элементе контейнера.

Я попытался создать пример приложения в plunker, но когда я просматриваю приложение, он просто показывает все записи, а директива ngInfiniteScroll не делает ничего особенного.

http://plnkr.co/edit/bohgyL?p=preview

  <div infinite-scroll='myPagingFunction()' infinite-scroll-distance='3'> 
    <div class="repeat" ng-repeat="movie in movies | orderBy: '-release_date'">
      <h2> {{ movie.title }} </h2>
      <h2> {{ movie.release_date }} </h2>
    </div>
  </div>

Желаемый результат заключается в том, что при просмотре приложения вы видите только результаты, которые находятся в вашем окне просмотра, а при прокрутке вниз в окно просмотра добавляются дополнительные результаты. Как это.

Так что я здесь не замечаю?

Peter Boomsma 12 окт. 2015, в 21:29

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

Zack Tanner · Accepted Answer · 2015-10-12T18-12-00.000Z

1

Лучший ответ

Вы не показываете нам никакого кода для myPagingFunction(), поэтому я предполагаю, что это проблема. Эта функция не существует из коробки, вам нужно ее сделать. См. Пример, показанный здесь: https://binarymuse.github.io/ngInfiniteScroll/demo_basic.html

Если у вас есть функция подкачки, пожалуйста, покажите ее нам, чтобы мы могли помочь отладить ваш код.

Zack Tanner 12 окт. 2015, в 18:12

0

Это действительно то, что я пропустил. Я думал, что они добавили функцию в директиву. Я попытался начать работу с этой функцией, но не могу даже запустить ее, когда достигается нижняя часть страницы, как вы можете видеть здесь plnkr.co/edit/bohgyL?p=preview .
Peter Boomsma 12 окт. 2015, в 20:56
0

Посмотрите этот пример здесь ... plnkr.co/edit/nNxsEufjUPyW3T7gB6LS?p=preview
Zack Tanner 12 окт. 2015, в 21:02
0

Спасибо Зак, это очень помогло. Не понимаю это полностью, потому что это много JS (что я не очень хорош). Но мне было интересно, вы устанавливаете число (var i=0;i<10;i++) , которое плохо масштабируется с размером браузера. Есть ли способ заполнить элемент снизу и добавить оттуда?
Peter Boomsma 12 окт. 2015, в 21:22
0

Вы можете перефразировать вопрос? 10 было произвольным числом; в основном, каждый раз, когда вы достигаете нижней части списка (в данном случае 10 элементов), он добавляет еще 10 элементов в список.
Zack Tanner 12 окт. 2015, в 21:26
0

В зависимости от стиля и размера браузера возможно, что область просмотра достаточно велика, чтобы показать установленное (в данном случае 10) количество элементов. Это приводит к тому, что пользователи не могут прокручивать и, следовательно, не получают всю информацию. plnkr.co/edit/B7CRjvdQ9paytwl5csKi?p=preview Если вы просмотрите этот плункер во всплывающем окне и измените его размер, вы должны увидеть, что я получаю. Если я просматриваю всплывающее окно в полноэкранном режиме (1900x1200), то не хватает элементов, чтобы вызвать полосу прокрутки, если я изменяю ее размер до меньшего разрешения (800x600), то я получаю полосу прокрутки и могу просматривать дополнительный контент.
Peter Boomsma 12 окт. 2015, в 21:42
0

Это вызвано вашим CSS. Элемент, привязанный к infinite-scroll , не имеет правильного размера для высоты содержимого, потому что каждый из ваших « repeat » элементов div является плавающим. Вам нужно добавить четкое исправление.
Zack Tanner 12 окт. 2015, в 21:53
0

Я пытался найти дополнительную информацию о том, как использовать clearfix в этом контенте, но я не могу понять это. Возможно я не объяснил свою проблему ясно, поэтому я попробую это снова. Когда я запускаю код, я вижу только 10 результатов. Если я изменю (var i=0;i<10;i++) на (var i=0;i<30;i++) я получу 30 результатов. Но я хочу видеть, что элемент #container-scroll содержащий элемент ng-repeat заполняет себя результатами до тех пор, пока не заполнится до конца.
Peter Boomsma 13 окт. 2015, в 10:10
0

Посмотрите на это: plnkr.co/edit/nVY4fMPhFSqbDnzwJJrA?p=preview
Zack Tanner 13 окт. 2015, в 17:19

Показать ещё 6 комментариев