Одна из функций, которые предоставляет предстоящий выпуск OnsenUI, - это компонент ons-lazy-repeat. Часто нам нужно загрузить списки элементов, которые достаточно велики, чтобы замедлить работу приложения или даже заморозить его до завершения загрузки, что ухудшает взаимодействие с пользователем. Вот тут-то и пригодится новый ons-lazy-repeat.
ons-lazy-repeat будет учитывать высоту элементов, чтобы отобразить на экране достаточное количество элементов, но ждать загрузки остальных, тем самым улучшая время загрузки и удобство работы пользователя, избегая при этом возможных проблем для более медленных устройств или подключений. Кроме того, одновременно с загрузкой новых элементов, которые появляются в поле зрения, ons-lazy-repeat также выгружает элементы, когда они больше не видны. При таком подходе можно отобразить список с миллионами элементов без снижения производительности.
Эта функция становится весьма удобной для многих случаев использования, таких как навигация по списку элементов с большим количеством изображений или анимаций. Давайте теперь посмотрим на пример приложения, использующего ons-lazy-repeat. Это приложение генерирует 10 миллионов (10 000 000) случайных элементов с изображениями и текстом:
Как использовать ленивый повтор
Нам нужен объект delegate, который будет содержать всю необходимую информацию для ons-lazy-repeat. Обратите внимание, что большинство функций получают параметр index, который содержит порядок элементов в списке. Вот наш delegate объект:
В деталях:
calculateItemHeight(index)должен возвращать высоту элемента, статическую, как в этом примере, или динамическую.countItems()возвращает общую длину списка, который мы хотим отобразить.destroyItemScope(index, childScope)- это необязательный метод, который будет запускаться каждый раз при выгрузке элемента, поэтому мы можем обрабатывать любые связанные функции.configureItemScope(index, childScope)содержит информацию о самих элементах, которые могут быть динамически созданы или загружены из заранее заданного массива элементов:
В этом примере мы определяем каждый элемент как объект, содержащий четыре разных атрибута, и один из них, item.desc, будет асинхронно загружен из HTTP-запроса, когда ons-lazy-repeat сочтет нужным. В реальных приложениях вы обычно хотите предварительно получить кучу элементов, а не получать их по одному, но для простоты в этом примере мы просто делаем запрос для каждого элемента.
В HTML нам просто нужно добавить ons-lazy-repeat к нашим традиционным тегам, таким как <ons-list-item>, указав ранее созданный delegate:
Помните, что объект MyDelegate должен быть прикреплен к области того же контроллера, в котором находится элемент <ons-list-item>. Также обратите внимание, что это общий атрибут, что означает, что он не ограничен <ons-list>, но работает с любым тегом, в котором мы может определить высоту элементов, например тегов <div>.
Это все о новой ons-lazy-repeat функции, вы наверняка найдете оригинальные способы ее использования. Вы можете проверить код этого проекта на Github и оставить свой вопрос или отзыв в комментариях. Следите за обновлениями!
Первоначально опубликовано на сайте onsen.io 15 февраля 2015 г.
