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 widget is class ui-snap-listview.

To add a list widget 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

Where to Go Next

• UI Component Reference