SnapListview

Shows a snap list view. It detects center-positioned list item when scroll end.

When scroll event started, SnapListview triggers "scrollstart" event, and scroll event ended, triggers "scrollend" event.
When scroll ended, it triggers "selected" event and attach class to detected(center-positioned) item.

Table of Contents

1. How to create SnapListview
2. Usage of SnapListview
3. Events

How to create SnapListview

Selector for snap listview component is class ui-snap-listview.

To add a list component to the application, use the following code:

List with basic items

You can add a basic listview as follows:

<ul class="ui-listview ui-snap-listview" id="snapList">
   <li>1line</li>
   <li>2line</li>
   <li>3line</li>
   <li>4line</li>
   <li>5line</li>
</ul>

In javascript code, you can make your list as SnapListview component as follows:

<script>
   var snapList = document.getElementById("snapList"),
       snapListComponent = tau.widget.SnapListview(snapList);
</script>

Usage of SnapListview

You can make your app more effectively with this SnapListview Component and Marquee Component.

When "selected" event triggered, center-positioned list item can be expand with sub text. Also, we can make main text move with Marquee.

TAU supported helper script named SnapListMarqueeStyle. You can use tau.helper.SnapListMarqueeStyle to make your application more nice.

Events