Как сделать так, чтобы jQuery Mobile scrollview прокручивал бесконечно влево и вправо, чтобы элементы повторялись снова? - PullRequest
9 голосов
/ 04 ноября 2011

По сути то же самое, что и этот вопрос: Как сделать бесконечно длинное представление прокрутки на iPhone? , но использование jQuery Mobile не объективно C.

Я использую этот плагин: http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html, в частности, пример в разделе «Горизонтальная прокрутка». Я хочу, чтобы он зациклился на себе, поэтому, когда пользователь доберется до крайнего правого положения, он вернется к началу, а если он прокрутится влево с начала, он перейдет к концу.

Меня не беспокоит, использует ли решение плагин scrollview, в частности, или нет, что он может иметь аналогичный эффект.

ОБНОВЛЕНИЕ: В конце концов, я поступил иначе, так как перемещение элементов в конец или начало списка казалось мерцающим при просмотре прокрутки jQuery Mobile на iPhone.

Я скопировал все элементы li в ul 3 раза, чтобы он был в 4 раза длиннее. Затем в начале сценария поместите точку прокрутки в начало 3-й копии (чтобы крайняя левая точка экрана была точно посередине длины списка).

Тогда всякий раз, когда положение прокрутки выходило за пределы начала 4-й копии, просто перемещайте положение прокрутки обратно в середину (смещение на количество пикселей, пройденное над ним). Затем то же самое в обратном порядке, запустив его, пошло дальше начала второй копии. Причина, по которой мне понадобилось 4 копии, заключалась в том, что была небольшая свобода действий, когда вы быстро прокручивали влево и выходили за пределы начала 2-й копии.

1 Ответ

8 голосов
/ 11 ноября 2011

Так что, по сути, вы хотите сделать что-то похожее на то, для чего я сделал: http://bbh.co.uk?

Логика очень проста, скажем, у вас есть 7 панелей, первое, что я сделал, это разработал, где 0точка перемещения, где находится центр 7 панелей, в данном случае это 4-й, так как у нас было бы 3 слева и 3 справа.

С этой 0 точкой мы можем затем решитьтам, где панели будут появляться, прокрутка произошла, скажем, пользователь прокручивает 2 слева направо, это означает, что наша точка 0 становится -2, поэтому мы перемещаем два справа налево вперед, т.е. мы добавляем их ксписок.

Самый простой способ управления им был с массивом, так как мы можем .push(), .pop(), .shift() и .unshift() панели.

Как только мы получилилогика в том порядке, в котором мы разместили каждый элемент, устанавливает позицию CSS каждой панели как абсолютную, а затем вычисляет ее положение в зависимости от того, где она находится в массиве, например, панель 0 будет в 0px слева в контейнере, а панель 7 будет вpanel.width * 7 и т. Д.

Затем необходимо убедиться, что контейнер находится в центре, в этой начальной точке 0 и в бум, у вас есть некоторая бесконечная прокрутка.

...