2011-11-04 6 views
9

In sostanza lo stesso di questa domanda: How to make an infinitely long scroll view on iPhone? ma utilizzando jQuery Mobile non oggettiva C.Come far scorrere scrollview di jQuery Mobile infinitamente a sinistra ea destra in modo che gli elementi si ripetano su se stessi?

sto usando questo plugin: http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html in particolare l'esempio in "orizzontale Scrollview". Voglio che ritorni su se stesso così quando l'utente arriva all'estrema destra, tornerà all'inizio e se scorre a sinistra dall'inizio andrà alla fine.

io non sono preoccupato se la soluzione utilizza il plugin ScrollView in particolare, o non solo che essa può avere un effetto simile.

UPDATE: Alla fine ho fatto un modo diverso in quanto gli elementi in movimento verso la fine o l'inizio della lista sembravano sfarfallio con lo scrollview di jQuery Mobile su un iPhone.

Quello che ho fatto è stato copia tutti gli elementi li entro i ul 3 volte, in modo che fosse 4 volte più a lungo. Quindi, all'inizio dello script, posiziona il punto di scorrimento all'inizio della terza copia (quindi il punto più a sinistra dello schermo era esattamente a metà della lunghezza dell'elenco).

Quindi, ogni volta che la posizione di scorrimento superava l'inizio della quarta copia, sposta semplicemente la posizione di scorrimento indietro verso il centro (spostato di quanti pixel ci sono andati). Quindi lo stesso in senso inverso, attivandolo è andato oltre l'inizio della seconda copia. Il motivo per cui avevo bisogno di 4 copie era che c'era un po 'di margine quando si scorreva a sinistra velocemente e andava oltre l'inizio della seconda copia.

+0

Se stai cercando una libreria per questo tipo di effetto "cilindro rotante", leggera in modo che si adatti al cellulare, potrebbe non esistere. –

risposta

8

Quindi, in sostanza si vuole fare qualcosa simular a ciò che ho fatto per: http://bbh.co.uk?

La logica è molto semplice, diciamo che hai 7 pannelli, la prima cosa che ho fatto è stato capire dove si trova il punto 0 del movimento, cioè il centro dei 7 pannelli, in questo caso è il 4 come avremmo 3 a sinistra e 3 a destra.

Con questo punto 0 si può quindi decidere dove i pannelli andranno in onda, si dice che l'utente scorre 2 da sinistra a destra, questo significa che il nostro punto 0 diventa -2, quindi spostiamo due da destra in primo piano a sinistra, cioè li anteponiamo alla lista.

Il modo più semplice per gestire è stato con una matrice, poiché non si può .push(), .pop(), .shift() e .unshift() i pannelli.

volta abbiamo avuto la logica in modo abbiamo posto ogni insieme la posizione CSS di ciascun pannello assoluto e quindi calcolata la sua posizione a seconda di dove è stato all'interno della matrice, ad esempio pannello 0 sarebbero a 0px lasciato nel contenitore e il pannello 7 sarebbe a panel.width * 7 e così via.

È quindi necessario assicurarsi che il contenitore è al centro, che iniziali 0 punti e boom, hai qualche scrolling infinito.

+1

Wow, bbh.co.uk sembra interessante (anche io non sono sicuro che sia una buona interfaccia utente). – ern0

+0

Quale plugin stai usando per lo scorrimento? Non penso che lo scrollview per jQuery mobile abbia abbastanza hook/eventi per controllarlo in quel modo. – Gnuffo1

+1

Non sto usando un plugin, ho scritto il codice me stesso. È molto semplice e usa la stessa logica che ho scritto nella risposta. –