Languages

Menu
Sites
Language
virtual list with snaplist strange

Hi,

I have a virutal list view combined with a SnapListStyle. Everything works fine but one thing: the selected item is not the one centered on the screen but the next one. What's the cause of this and how do I resolve this?

You can reproduce the case in the Tau UI Component sample by activating the SnapListStyle: open circle-helper.js and remove the check for 'pageTestVirtualList'

List

Responses

2 Replies
Iqbal Hossain

Hi~

Try like this,

<div class="ui-page" id="pageTestVirtualList">
    <header class="ui-header">
		<h2 class="ui-title">Virtual List</h2>
	</header>
	<div class="ui-content">
		<ul id="vlist1" class="ui-listview ui-virtuallistview">
	</ul>
	</div>
</div>

And, 

var page = document.getElementById("pageTestVirtualList"),
    	elList = document.getElementById("vlist1"),
		vlist;

	/**
	 * pagebeforeshow event handler
	 * Do preparatory works and adds event listeners
	 */
	page.addEventListener("pagebeforeshow", function() {
		vlist = tau.widget.VirtualListview(elList, {
			dataLength: JSON_DATA.length,
			bufferSize: 40,
			scrollElement: "ui-scroller"
		});

		// Update listitem
		vlist.setListItemUpdater(function(elListItem, newIndex) {
			//TODO: Update listitem here
			var data =  JSON_DATA[newIndex];
			elListItem.innerHTML = '<span class="ui-li-text-main">' + data.NAME+'</span>';
		});
		// Draw child elements
		vlist.draw();
	});

-Thanks

Philippe Wechsler

Hi, isn't this just how to create a virual list view? That's what I already have. Now add the following and run the app:

tau.helper.SnapListStyle.create(list[i], {animate: "scale"});

Now the selected item in the list is always the wrong one, that is my problem...

Btw: I am developing an wearable circular app.