您可以创建一个圆或rectangle-shaped指数滚动条组件与CircularIndexScrollBar IndexScrollBar api。
这个功能只支持在可穿戴的应用程序。
下图显示了指数滚动条的布局矩形和圆形的UI组件。
图:指数在矩形和圆形滚动条组件设备
实现指数滚动条组件:
1.编辑HTML代码将组件添加到您的应用程序屏幕:- <div class="ui-page ui-page-active" id="pageIndexScrollbar" >
- <header class="ui-header ui-header-small">
- <h2 class="ui-title ui-title-text-fadeout">Index Scroll Bar</h2>
- </header>
- <div id="indexscrollbar"></div>
- <section class="ui-content">
- <ul class="ui-listview ui-snap-listview" id="list1">
- <li class="ui-listview-divider">A</li>
- <li>Anton</li>
- <li class="ui-listview-divider">B</li>
- <li>Barry</li>
- <li>Bob</li>
- <li class="ui-listview-divider">C</li>
- <li>Carry</li>
- <li class="ui-listview-divider">D</li>
- <li>Daisy</li>
- <li class="ui-listview-divider">E</li>
- <li>Eric</li>
- <li class="ui-listview-divider">F</li>
- <li>Fay</li>
- <li class="ui-listview-divider">G</li>
- <li>Garry</li>
- </ul>
- </section>
- </div>
复制代码 2.编辑JavaScript代码来管理指数滚动条事件和其他功能:
创建一个组件有选择性地:- var indexScrollbarElement = document.getElementById("indexscrollbar");
- if (!tau.support.shape.circle)
- {
- /* Create IndexScrollbar */
- indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
- }
- else
- {
- /* Create CircularIndexScrollbar */
- indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
- }
复制代码 使用回调:
- indexScrollbarElement.addEventListener("select", function(event)
- {
- var index = event.detail.index;
- /* Do something using the index */
- console.log(index);
- });
复制代码在接下来的例子中,滚动列表定义列表项的位置使用 用户界面 - - - - - - 列表视图 - - - - - - 分频器 类,选择指数滚动条。 注意,在一个矩形的UI,触摸索引生成选择,但在一个圆的UI,选择使用扶轮时发生。
|