Question

我正在尝试为Gear 2制作一个简单的页面（运行Tizen OS）。在此页面中，用户可以向上或向下滚动以查看不同的meds，然后可以向左滑动以查看要求确认所拍摄的med的屏幕。我已经采取了一些示例Tizen操作系统代码并拼凑在一起试图实现这一点，但它没有按预期工作 - 它只是显示所有4个文本元素，一个接一个。我是HTML和JavaScript的新手，所以我确定我犯了一些简单的错误。

的index.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>

app.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"
            });

    });
    }
    })();

对潜在问题的任何见解表示赞赏。感谢

Answer 1

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

您应该在aplliaction之外创建另一个布局。例如，您可以在主级别使用水平部分更换器，在每个部分使用垂直滚动内容。

我修复了你的代码，现在所有的部分转换器都已正确构建，但仍然存在使用widget的问题。

<!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>

Tizen可穿戴平台上的基本JavaScript / HTML页面

1 个答案: