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.


Note
This component is supported since 2.3.

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:

var snapList = document.getElementById("snapList"),
    snapListComponent = tau.widget.SnapListview(snapList);

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

Name Description
scrollstart

Triggered when snaplist scoll started.

scrollend

Triggered when snaplist scoll ended.

selected

Triggered when snaplist detects center-positioned list item.