2

我正在尝试为 Gear 2（运行 Tizen OS）制作一个简单的页面。在此页面中，用户可以向上或向下滚动以查看不同的药物，然后可以向左滑动以查看要求确认药物已服用的屏幕。我采用了一些示例 Tizen OS 代码并将其拼凑在一起以尝试实现此目的，但它没有按预期工作 - 它只是显示所有 4 个文本元素，一个接一个。我对 HTML 和 JavaScript 很陌生，所以我确信我犯了一些简单的错误。

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no"/>
    <title>UITest</title>
    <link rel="stylesheet"  href="lib/tau/themes/default/tau.css">
</head>
<body>
    <div class="ui-page ui-page-active" id="main">
        <header class="ui-header">
            <h2 class="ui-title">2 med(s) to take</h2>
        </header>

        <div id="barsectionchanger" class="ui-content">
            <section class = "barcontainer">
                <div class = "hsectionchanger">

                    <div>

                    <section class="section-active" style="text-align:center">
                        <h3> med 1 </h3>
                    </section>
                    <section style="text-align:center">
                        <h3> did you take med 1 </h3>
                    </section>
                    </div>
                </div>
            </section>
            <section class = "barcontainer">
                <div class = "hsectionchanger">

                    <div>

                    <section class="section-active" style="text-align:center">
                        <h3> med 2 </h3>
                    </section>
                    <section style="text-align:center">
                        <h3> did you take med 2 </h3>
                    </section>
                    </div>
                </div>

            </section>
        </div>

    </div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.js"></script>
<script type="text/javascript" src="lib/tau/js/widget/virtuallist.js"></script>
<script src="app.js"></script>
</html>

应用程序.js

( function () {
window.addEventListener( 'tizenhwkey', function( ev ) {
    if( ev.keyName == "back" ) {
        var page = document.getElementsByClassName( 'ui-page-active' )[0],
            pageid = page ? page.id : "";
        if( pageid === "main" ) {
            tizen.application.getCurrentApplication().exit();
        } else {
            window.history.back();
        }
    }
} );
} () );




(function() {

    var page = document.getElementById( "main" ),
        changer = document.getElementById( "barsectionchanger" ),
        sectionChanger, idx=1;

    page.addEventListener( "pageshow", function() {
        sectionChanger = new tau.SectionChanger(changer, {
            circular: false,
            orientation: "vertical",
            scrollbar: "bar"
        });
    });

    page.addEventListener( "pagehide", function() {

        sectionChanger.destroy();
    });
    })();

    (function() {

    var underlayarray = document.getElementsByClassName( "barcontainer" ),
        changerarray = document.getElementsByClassName( "hsectionchanger" ),
        sectionChanger, idx=1;
    for (i = 0; i < underlayarray.length; i++){


        underlayarray[i].addEventListener( "pageshow", function() {
            sectionChanger = new tau.SectionChanger(changerarray[i], {
                circular: false,
                orientation: "horizontal"
            });

    });
    }
    })();

任何对潜在问题的洞察力都值得赞赏。谢谢

4

1 回答 1

1

SectionChanger 小部件的构造不允许将一个小部件实例放在另一个内。

您应该创建另一个布局关闭应用程序。例如，您可以在每个部分的主级别和垂直滚动内容上使用水平部分更改器。

我修复了您的代码，现在所有部分更改器都已正确构建，但仍然存在小部件工作问题。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no"/>
    <title>UITest</title>
    <link rel="stylesheet"  href="lib/tau/themes/default/tau.css">
</head>
<body>
<div class="ui-page ui-page-active" id="main">
    <header class="ui-header">
        <h2 class="ui-title">2 med(s) to take</h2>
    </header>

    <div id="barsectionchanger" class="ui-content">
        <div>
            <section class="hsectionchanger">
                <div>
                    <section class="section-active" style="text-align:center">
                        <h3> med 1 </h3>
                    </section>
                    <section style="text-align:center">
                        <h3> did you take med 1 </h3>
                    </section>
                </div>
            </section>
            <section class="hsectionchanger">
                <div>
                    <section class="section-active" style="text-align:center">
                        <h3> med 2 </h3>
                    </section>
                    <section style="text-align:center">
                        <h3> did you take med 2 </h3>
                    </section>
                </div>
            </section>
        </div>
    </div>

</div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.js"></script>
<script>( function () {
    window.addEventListener('tizenhwkey', function (ev) {
        if (ev.keyName == "back") {
            var page = document.getElementsByClassName('ui-page-active')[0],
                    pageid = page ? page.id : "";
            if (pageid === "main") {
                tizen.application.getCurrentApplication().exit();
            } else {
                window.history.back();
            }
        }
    });
}() );


(function () {
    var page = document.getElementById("main"),
            changer = document.getElementById("barsectionchanger"),
            sectionChanger, idx = 1;

    page.addEventListener("pageshow", function () {
        var changerarray = document.getElementsByClassName("hsectionchanger"),
                i;

        tau.widget.SectionChanger(changer, {
            circular: false,
            orientation: "vertical",
            scrollbar: "bar",
            items: changer.firstElementChild.children
        });

        for (i = 0; i < changerarray.length; i++) {
            tau.widget.SectionChanger(changerarray[i], {
                circular: false,
                orientation: "horizontal"
            });
        }
    });

    page.addEventListener("pagehide", function () {
        sectionChanger.destroy();
    });
})();
</script>
</html>
于 2014-11-18T15:51:04.930 回答