语言

Menu
Sites
Language
Using the Gear S2 Bezel to scroll a dynamic list?

Hello,

In my wearable app, I have a list with ui-listview class. I want to populate the list with dynamic list items and use the bezel to scroll through the list. Static items seem to work fine with the bezel (if I add the items manually), but once I add a <li> item from code, the list cannot be scrolled using the bezel anymore. I have added tau css, js and the circle-helper.js. Any suggestions?

查看选择的答案
列表

响应

2 回复
Mark as answer
Heeju Joo

Hello,

You are using SnapListView component(which work fine with bezel rotary) because you added "circle-helper.js", right?

Please call refresh() method of SnapListView after you add some <li> items.

Here's working code. (I've used setTimeout for adding <li> items merely as an example.)

Important thing to remember is "call a method SnapListView.refresh() after append new list item".

(function() {
	var page = document.getElementById("main"), // please select your page by id
		list,
		snapListviewWidget;

	page.addEventListener("pagebeforeshow", function pageShowHandler(e) {
		list = document.querySelector(".ui-listview");
		if (list) {
			snapListviewWidget = tau.widget.SnapListview(list); // for call refresh()
		}

		setTimeout(function() {
			var listItem = document.createElement("li"); // make li element
			listItem.innerHTML = "test";
			list.appendChild(listItem);                 // append it to list
			snapListviewWidget.refresh();               // important! please call refresh() of SnaplistView
		}, 2000);
	}, false);
}());

 

Le Hoang

Thanks a lot! :D