1 Reply Latest reply on Dec 16, 2011 11:58 AM by VivD

    Adding a new item to start of list snaps new item into view

    VivD

      I have an array collection as the dataprovider for a list. The consists of full screen images. On scrolling/swiping left or right I check to see if it is the end or start of the viewport and add preload new images to the end or start respectively.

       

      Adding at the end works perfectly. However, when I add an item to the start of the list, the newly added image shows up i.e. list snaps to the newly added item.

       

      e.g. if I have images 1,2 and 3 and let's say 2 is what is in the view currently. When I swipe left to right, I see image 1. Since image 1 is the first image and therefore the beginning of the viewport, it triggers a function that gets the image that needs to appear before image 1, let's call it image 0.

      However, on doing this, image 0 comes into view. Image 1 is what should be in the view.

       

      Is there a way to prevent this?

        • 1. Re: Adding a new item to start of list snaps new item into view
          VivD Level 1

          Still struggling to find a solution to this issue. Anyone has a solution or a different approach I should follow to load images to the start and end of the list dynamically.

           

          Here's a code sample:-

           

          protected function singlePhotoList_creationCompleteHandler(event:FlexEvent):void

                                        {

                                                  SinglePhotoList.scroller.viewport.addEventListener( PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler );

           

                                        }

           

           

                                        protected function propertyChangeHandler(event:PropertyChangeEvent):void

                                        {

                                                   if ( event.property == "horizontalScrollPosition" )

                                                  {

           

                                                     // Check if user has scrolled to end and load more photos

                               if (fullPhotoLayout.getHorizontalScrollPositionDelta(NavigationUnit.END) == 0)

                                                            {

                                   

                                   //Add Next image to gallery

           

                                                            }

           

                                 // Check if user has scrolled to start and load more photos

                                                             if (fullPhotoLayout.getHorizontalScrollPositionDelta(NavigationUnit.HOME) == 0)

                                                            {

                                                                //Add previous image to gallery

                                                

                               }

                           }

                                        }

           

           

           

          <s:List id="SinglePhotoList"

                                        width="100%" height="100%"

                                        verticalScrollPolicy="off"

                                        dataProvider="{fullImageGallery}"

                                        itemRenderer="components.FullPhoto"

                                        pageScrollingEnabled="true" scrollSnappingMode="center"

                                        useVirtualLayout="false"

                                        creationComplete="singlePhotoList_creationCompleteHandler(event)"

                                        >

            <s:layout>

                                        <s:HorizontalLayout id="fullPhotoLayout" gap="10" variableColumnWidth="false"  columnWidth="{SinglePhotoList.width}" verticalAlign="justify" />

            </s:layout>

            </s:List>