如何在三星 Tizen Gear s2 中使用边框滚动列表中的项目？

Question

我有一个问题一直在处理。我为 gear s2 做网络应用开发。

我想在我的应用程序中执行的操作与您在手表本身中执行的操作完全相同。

例如，在“设置”中，您有一个垂直列表，您可以通过旋转表圈来滚动浏览项目。

根据这个问题我知道Rotarty (ring) on Samsung Tizen Gear S2 应该使用这个事件：

 rotaryDetentCallback = function rotaryDetentHandler(e) {
    var direction = e.detail.direction;
    if (direction === "CW") {
        // TODO: do something

    } else if (direction === "CCW") {
        // TODO: do something

    }
};

window.addEventListener("rotarydetent", rotaryDetentCallback);

我怎样才能让它在 if() 中工作以滚动列表中的项目？

Answer 1

这取决于您要显示的列表类型。

对于静态列表项，TAU 框架已经为您解决了这个问题。所以你不需要在脚本端添加任何东西。

静态内容示例：

<ul data-role="listview" >
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
</ul>

对于动态内容，此功能仍有缺陷，但可能。您必须在"pagebeforeshow"（不是"pageshow"）中更新您的动态列表的内容。一旦你这样做了，它的行为就好像它是一个静态列表。

动态内容示例：

在您的 html 中：

<ul id="myListView" data-role="listview" >
</ul>

在你的 js 中：

page.addEventListener("pagebeforeshow", function () {
    var element = document.getElementById("myListView");
    var myListView = tau.widget.Listview(element);

    myListView.addItem("<li>item 1</li>", 1);
    myListView.addItem("<li>item 2</li>", 2);
    myListView.addItem("<li>item 3</li>", 3);
    myListView.addItem("<li>item 4</li>", 4);
    myListView.addItem("<li>item 5</li>", 5);
    myListView.addItem("<li>item 6</li>", 6);
    myListView.addItem("<li>item 7</li>", 7);
    myListView.addItem("<li>item 8</li>", 8);
});

希望这些示例对您有用。