2

Gear 2 (Tizen OS を実行) 用の簡単なページを作成しようとしています。このページでは、ユーザーは上下にスクロールしてさまざまな薬を表示できます。次に左にスワイプすると、服用した薬の確認を求める画面が表示されます。サンプルの Tizen OS コードをいくつか取り、それを組み合わせてこれを実現しようとしましたが、期待どおりに機能しません。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"
            });

    });
    }
    })();

潜在的な問題についての洞察をいただければ幸いです。ありがとう

4

1 に答える 1