Section changer with list in it doesn’t work

BY 02 Sep 2018 Web Application Development

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: