Lista z płynnym przewijaniem

01-08-2010 przez damian Zostaw odpowiedź »

W tym przykładzie pokażę jak zbudować listę z płynnym przewijaniem (scrollem). Pisząc jedną z aplikacji musiałem użyć listy do wyświetlania obrazków o dużej wysokości. Niestety przewijanie w liście działa skokowo, tzn. przesuwając suwak, lista przeskakuje do kolejnych elementów.

Dla mnie takie rozwiązanie było nie do przyjęcia. Zależało mi na płynnym scrollu, tak, żeby można było widzieć oba elementy częściowo. Żeby lepiej zobrazować problem zamieszczam przykład.

Z pomocą przyszedł Repeater, który działa w ten sposób, że dla każdego elementu z dataProvider, powtarza to co się w nim zawiera. Żeby móc odnieść się do iterowanych elementów należy przypisać mu id, aby następnie użyć pola currentItem.


		
			
		
	

Jak widać użyłem jeszcze Boxa. Sam Repeater tylko powtórzy swoją zawartość. Nawet jeśli damy mu stały height, to przyjmie on wysokość jaka będzie potrzebna do wyświetlenia wszystkich elementów. Jednakże po włożeniu do Boxa i ustawieniu mu width i height, to Box doda sobie suwak, którym będzie można płynnie przewijać jego elementy. To wszystko :)

Reklama

2 komentarzy

  1. Iras pisze:

    Witam

    Z tego co wiem zanim repeater musi najpierw pobrać dane dla całej listy i dopiero potem ją wyświetli, co przy kilku tysiącach elementów mogło by to trwać bardzo długo.
    Poszukuje rozwiązania problemu polegającego też na wprowadzeniu płynnego przewijania listy ale dodatkowo przy generowaniu elementów tej listy na bierząco.

  2. damian pisze:

    Szczerze mówiąc nie robiłem testów wydajności, ale zwykły List też ma swój dataProvider i też musi utworzyć dzieci, które będą zawierały dane elementów z pola dataProvider.
    Jeśli chodzi o generowanie elementów na bieżąco (dynamiczne) to wystarczy wyedytowac pole dataProvider.
    A jeszcze jako ciekawostke dodam, że we Flashu 10.1 elementy list będą tworzone dopiero jak ktoś je będzie chciał wyświetlić. Tzn., że jeśli mamy 100 elementow w liście, a nie zjedziemy na sam dół to ostatnie elementy w ogóle nie będą generowane.

Dodaj komentarz

Flexmaniaks on Facebook