gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 01:43:54 25 4
gpt4 key购买 nike

我正在尝试为 Gear 2(运行 Tizen 操作系统)制作一个简单的页面。在此页面中,用户可以向上或向下滚动以查看不同的药物,然后可以向左滑动以查看要求确认已服用药物的屏幕。我采用了一些示例 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>

应用程序.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"
});

});
}
})();

任何对潜在问题的见解都值得赞赏。谢谢

最佳答案

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>

关于javascript - Tizen 可穿戴平台上的基本 JavaScript/HTML 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24042415/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com