Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Posts: 435
Registered: ‎09-20-2011
My Device: Z10 LE, Playbook, DevAlpha C, 9900, 9380
My Carrier: Vodafone

getting event of swipe in horizontal listview.

Hi all,


I was implementing horizontal BB carousel in a listview. Which show only one item at a time. I am able to do the horizontal listview carousel, but the problem is on how to get whether the item is changed to the next or previous on swipe.



Posts: 293
Registered: ‎10-15-2012
My Device: bb10 developer
My Carrier: Orange

Re: getting event of swipe in horizontal listview.

I never found a neat way to do this. There is no signal that the listview emits when the scoll position changes. In the end I've used a LayoutUpdateHandler on each item to detect when the list items have changed position. I define a function in the ListView that does the calculation.


The key is to detect which item has an x-coordinate of '0' - the one that has a coordinate of 0 must be the 'current' item, assuming that the listview spans the whole width of the display. In the code below you'll see that I use a '< 10' to get close-enough to 0



ListView {

snapMode: SnapMode.LeadingEdge flickMode: FlickMode.SingleItem layout: StackListLayout { orientation: LayoutOrientation.LeftToRight } function itemLayoutChanged(listItem, layoutFrame) { if(Math.abs(layoutFrame.x) < 10) { var itemIndex = listItem.indexInSection; console.log("item " + itemIndex + " selected"); } }

listItemCompinents: [
] }

 the listitem needs to look like this:


ListItemComponent {
   id: myItem
   Container {
     attachedObjects: LayoutUpdateHandler {
        onLayoutFrameChanged: {
            myItem.ListItem.view.itemLayoutChange(myItem.ListItem, layoutFrame);


Posts: 85
Registered: ‎05-25-2012
My Device: Limited Edition Z10
My Carrier: Bell

Re: getting event of swipe in horizontal listview.

Do you need to know which list item the user is currently viewing?  If the user selects the item you will know which item it is.  If you want to display something different on the screen depending on which item is visible you can add those controls to to the ListItemComponent.

Posts: 508
Registered: ‎01-19-2011
My Device: My Trusty Red Plane
My Carrier: Outer Space

Re: getting event of swipe in horizontal listview.

Have you tried using the ListScrollStateHandler?


ListView {
                id: listView
                //and other stuff
                attachedObjects: [
                    ListScrollStateHandler {
                        onFirstVisibleItemChanged: {
                            console.log("Current visible item is:  " + firstVisibleItem);


I'm a bird from outer space. But I'm not flappy o.o
New Developer
Posts: 18
Registered: ‎02-06-2014
My Device: Z10
My Carrier: Airtel

Re: getting event of swipe in horizontal listview.

[ Edited ]
onFirstVisibleItemChanged signal i am getting the index of current visible item, but when scrolling comes to end it is automatically emitting (n-1) item index. For example i have 5 items in listview, when i reach 5th item its emitted 5 then automatically to 4, and if i scroll back to 4th item now no signal emitting, then from 3rd item onwards to back working fine.. 

Can any one help me why this different behaviour when scroll reaches last item in the listview?
Posts: 621
Registered: ‎04-08-2013
My Device: Z10
My Carrier: Virgin Canada

Re: getting event of swipe in horizontal listview.

I also use a LayoutUpdateHandler for horizontal ListView, here's a sample app I've made for building a Tutorial.