It's my index.html:
<body>
<div class="ui-page ui-page-active" id="main">
<div class="ui-page-indicator" id="pageIndicator"></div>
<div class="ui-content" id="hsectionchanger">
<div>
<section class="section" class="ui-section-active">
<h3> Page1 of 3</h3>
</section>
<section class="section">
<h3> Page2 of 3</h3>
</section>
<section class="section">
<ul class="ui-listview" id="settingsList">
<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>
<li>item 9</li>
<li>item 10</li>
</ul>
</section>
</div>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/index/sections.js"></script>
</body>
and my sections.js:
(function(tau){
var self = this,
page = document.getElementById('main'),
changer = document.getElementById('hsectionchanger'),
sectionChanger,
elPageIndicator = document.getElementById('pageIndicator'),
pageIndicator,
pageIndicatorHandler;
var settingsListHelper;
page.addEventListener('pagebeforeshow', function(){
pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: 3 });
pageIndicator.setActive(0);
sectionChanger = new tau.widget.SectionChanger(changer, {
circular: false,
orientation: "horizontal",
useBouncingEffect: true
});
});
page.addEventListener('pagehide', function(){
sectionChanger.destroy();
pageIndicator.destroy();
});
pageIndicatorHandler = function(e) {
pageIndicator.setActive(e.detail.active);
};
changer.addEventListener("sectionchange", pageIndicatorHandler, false);
// Scrolling
page.addEventListener('pagebeforeshow', function () {
settingsListHelper = tau.widget.SnapListview(document.getElementById('settingsList'));
});
settingsPageHandler = function(e) {
var selectedIndex = settingsListHelper.getSelectedIndex(),
direction = e.detail.direction;
console.log('selectedIndex: ' + selectedIndex);
if (direction === 'CW' && selectedIndex !== null) {
settingsListHelper.scrollToPosition(++selectedIndex);
} else if (direction === 'CCW' && selectedIndex !== null) {
settingsListHelper.scrollToPosition(--selectedIndex);
}
}
changer.addEventListener('sectionchange', function(e) {
window.removeEventListener('rotarydetent', settingsPageHandler);
switch (e.detail.active) {
case 2:
window.addEventListener('rotarydetent', settingsPageHandler)
break;
default:
break;
}
}, false);
page.addEventListener('pagehide', function () {
settingsListHelper.destroy();
});
}(tau));
Then I'm starting it in simulator i see that:
Just a part of listview. Then I try to rotate bazel I get nothing, but SnapListview change it index.
How to fix it?