2016-02-23 2 views
0

Веб-приложение HTML5 имеет страницу с очень большим списком. Теперь он имеет 400 записей и может быть намного позже. Я боюсь, что в будущем на мобильных платформах он начнет рыться, когда во время заполнения будет заполнено больше данных. Он выглядит как tableView. Очень простая вещь. Нет ничего, кроме меню гамбургеров.Как передать очень большой список в HTML5?

В принципе, это элемент UL, содержащий элементы LI. Элемент body растет с помощью этого элемента UL.

В каждой записи есть одно ключевое слово. Он сортируется в алфавитном порядке (но половина контента начинается с одного и того же символа). Это приводит к подробной странице.

Существует панель поиска, которая отфильтровывает совпадения при использовании. Если панель поиска пуста, отображаются все записи (это обязательно).

Проблема в том, что контент не может быть действительно разделен на категории. Это один единственный список.

Лучшим был бы скрытый трюк, потому что графический интерфейс не должен быть изменен.

Когда я смотрю на UITableView собственных приложений, есть трюк: всего несколько строк. Когда строка покидает видимую часть во время прокрутки вниз, она возвращается обратно и добавляется снизу снова (но с новым контентом для этой строки). Пользователь этого не замечает и думает, что есть пучки элементов строки. UITableView почти бесконечен.

Я пробовал iScroll. Но это также добавляет несколько уродливого взгляда & чувствую себя во время прокрутки (они полностью изобрели прокрутку?)

Могу ли я архивировать это (или подобное) в HTML5? Я предпочитаю не-плагин-решение, потому что многие плагины javascript имеют тенденцию раздувать все приложение или уничтожать его вид &. Мне просто нужен удар производительности для этого большого списка. Или есть трюк, чтобы сообщить браузеру, что он должен действовать как UITableView здесь?

Я также пробовал использовать трюк css, используя transform: translateZ (0). Это не сработало. Здесь ничего не происходит.

Приложение само по себе небольшое и в основном это «бесконечный» список плюс некоторые небольшие дополнительные функции.

DOM-следующий: HTML -> Тело -> Div-контейнер (для хорошей затухающего эффекта, а иногда перемещается немного вбок, чтобы раскрыть меню гамбургер) -> уль и searchform -> литий внутри ул

Я не вижу способа оптимизировать здесь.

PS: Есть ограничение по высоте? Или мой страх без причины, и браузер уже делает что-то, чтобы предотвратить замедление производительности для таких больших списков?

ответ

0

Посмотрите на Clusterize.js, вам может быть интересно. Он был создан именно для решения таких проблем производительности.

Clusterize поддерживает <ol>, <ul> списки и не изобретать прокрутку, все выглядит как собственный прокрутка html.

Смежные вопросы