Как прокручивать элементы в списке, используя рамку в Samsung Tizen Gear s2?

Question

У меня есть вопрос, с которым я имел дело в течение некоторого времени. Я занимаюсь разработкой веб-приложений для передачи s2.

Что я хочу сделать в своем приложении, это нечто похожее на то, что вы делаете в самих часах.

В '' settings '', например, у вас есть вертикальный список, и вы можете прокручивать элементы, поворачивая рамку.

я знаю по этому вопросу 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); 

Как я могу заставить его работать внутри, если(), чтобы прокрутить элементы в списке?

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> 

в ваших ЯШ:

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); 
}); 

Я надеюсь, что вы найдете эти примеры полезны.