通过将“ data-enable-page-scroll”更改为true或false，除了使该部分的位置混乱之外，它还启用了一项功能或另一项功能。 'false'启用'pageindicator'并且页面看起来很完美，但是'moreoptions'不起作用。现在，如果我将其设置为“ true”，“ moreoptions”，而不是页面指示器，那么，整个页面在手表上似乎会向下移动很多。
“ pageindicator”不起作用，是指它根本没有显示在页面顶部。
通过“ moreoptions”不起作用，我的意思是它确实在右侧显示了3个点（也已正确缩进），但是，在屏幕上却未显示“ moreoptionsPopupCircle”。此外，当我触摸按钮时，就好像它只是屏幕上的某些静态元素一样，没有动画。
设备：Gear S3 Frontier
Index.html：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<title>Wearable UI</title>
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="/lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="/lib/tau/wearable/theme/default/tau.circle.min.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="css/style-main.css"/>
</head>
<body>
<div id="application">
<div id="pageIndicatorPage" class="ui-page" data-enable-page-scroll="true">
<button type="button" class="ui-more">More Options</button>
<div id="pageIndicator" class="ui-page-indicator"></div>
<div id="hsectionchanger" class="ui-content">
<div>
<section class="ui-section-active section" style="text-align:center">
<header id="main">Main</header>
<div id="a" class="positive-left circle-button"></div>
</section>
<section class="section" style="text-align:center">
<header id="main2">b</header>
<div id="b" class="positive-left circle-button"></div>circle-button"></div>
</section>
</div>
</div>
<!-- Circle Profile -->
<div id="moreoptionsPopupCircle" class="ui-popup">
<div id="selector" class="ui-selector">
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
<div class="ui-item delete-icon" data-title="Delete"></div>
<div class="ui-item x-icon" data-title="X Icon"></div>
<div class="ui-item fail-icon" data-title="Fail"></div>
</div>
</div>
<script type="text/javascript" src="moreoptions.js"></script>
</div>
</div>
<script type="text/javascript" src="/lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script src="js/pageindicator.js"></script>
</body>
moreoptions.js：http://pastebin.com/Ykx1E49v
pageindicator.js：http://pastebin.com/C28V9Jfa
style.css：http://pastebin.com/7pwGqnMz
style-main.css：http://pastebin.com/J1MW8Zyx
最佳答案
您需要JavaScript代码才能使其正常运行。
<body>
<div id="hsectionchangerPage" class="ui-page" data-enable-page-scroll="false">
<div id="pageIndicator" class="ui-page-indicator"></div>
<link rel="stylesheet" href="css/sectionchanger.css">
<div class="ui-content content-padding">
<button type="button" class="ui-more">More Options</button>
</div>
<div id="hsectionchanger" class="ui-content">
<!-- section changer has only one child. -->
<div>
<section style="text-align:center" >
<h3> LEFT2 PAGE </h3>
</section>
<section style="text-align:center">
<h3> LEFT1 PAGE </h3>
</section>
<section class="ui-section-active" style="text-align:center">
<h3> MAIN PAGE </h3>
</section>
<section style="text-align:center">
<h3> RIGHT1 PAGE </h3>
</section>
<section style="text-align:center">
<h3> RIGHT2 PAGE </h3>
</section>
</div>
</div>
<!-- Square Profile -->
<div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
<div class="ui-popup-header">Options</div>
<div class="ui-popup-content">
<ul class="ui-listview">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</div>
<!-- Circle Profile -->
<div id="moreoptionsPopupCircle" class="ui-popup">
<div id="selector" class="ui-selector">
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
<div class="ui-item delete-icon" data-title="Delete"></div>
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
<div class="ui-item delete-icon" data-title="Delete"></div>
<div class="ui-item x-icon" data-title="X Icon"></div>
<div class="ui-item fail-icon" data-title="Fail"></div>
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
<div class="ui-item delete-icon" data-title="Delete"></div>
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
<div class="ui-item delete-icon" data-title="Delete"></div>
<div class="ui-item x-icon" data-title="X Icon"></div>
<div class="ui-item fail-icon" data-title="Fail"></div>
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
<div class="ui-item delete-icon" data-title="Delete"></div>
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
<div class="ui-item delete-icon" data-title="Delete"></div>
<div class="ui-item x-icon" data-title="X Icon"></div>
<div class="ui-item fail-icon" data-title="Fail"></div>
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
<div class="ui-item delete-icon" data-title="Delete"></div>
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
<div class="ui-item delete-icon" data-title="Delete"></div>
<div class="ui-item x-icon" data-title="X Icon"></div>
<div class="ui-item fail-icon" data-title="Fail"></div>
</div>
</div>
<script src="hsection.js"></script>
<script type="text/javascript" src="moreoptions.js"></script>
</div>
<script type="text/javascript" src="../../../lib/tau/wearable/js/tau.min.js"></script>
</body>
hsection.js
(function() {
var page = document.getElementById( "hsectionchangerPage" ),
changer = document.getElementById( "hsectionchanger" ),
sectionLength = document.querySelectorAll("section").length,
elPageIndicator = document.getElementById("pageIndicator"),
sectionChanger,
pageIndicator,
pageIndicatorHandler;
/**
* pagebeforeshow event handler
* Do preparatory works and adds event listeners
*/
page.addEventListener( "pagebeforeshow", function() {
// make PageIndicator
pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sectionLength });
pageIndicator.setActive(2);
// make SectionChanger object
sectionChanger = tau.widget.SectionChanger(changer, {
circular: false,
orientation: "horizontal",
useBouncingEffect: true
});
});
/**
* pagehide event handler
* Destroys and removes event listeners
*/
page.addEventListener( "pagehide", function() {
// release object
sectionChanger.destroy();
});
/**
* sectionchange event handler
*/
pageIndicatorHandler = function (e) {
pageIndicator.setActive(e.detail.active);
};
changer.addEventListener("sectionchange", pageIndicatorHandler, false);
}());
moreoptions.js
/*global tau */
/*jslint unparam: true */
(function(){
/**
* page - More option page element
* popup - More option popup element for rectangular devices
* handler - Element for opening more option popup
* popupCircle - More option popup element for circular devices
* elSelector - Selector element in the circular popup
* selector - TAU selector instance
*/
var page = document.querySelector("#hsectionchangerPage"),
popup = page.querySelector("#moreoptionsPopup"),
handler = page.querySelector(".ui-more"),
popupCircle = page.querySelector("#moreoptionsPopupCircle"),
elSelector = page.querySelector("#selector"),
selector,
clickHandlerBound;
/**
* Click event handler for opening more option popup
*/
function clickHandler() {
if (tau.support.shape.circle) {
tau.openPopup(popupCircle);
} else {
tau.openPopup(popup);
}
}
/**
* pagebeforeshow event handler
* Do preparatory works and adds event listeners
*/
page.addEventListener( "pagebeforeshow", function() {
var radius = window.innerHeight / 2 * 0.8;
clickHandlerBound = clickHandler.bind(null);
handler.addEventListener("click", clickHandlerBound);
if (tau.support.shape.circle) {
selector = tau.widget.Selector(elSelector, {itemRadius: radius});
}
});
/**
* pagebeforehide event handler
* Destroys and removes event listeners
*/
page.addEventListener( "pagebeforehide", function() {
handler.removeEventListener("click", clickHandlerBound);
if (tau.support.shape.circle) {
selector.destroy();
}
});
/**
* When user click the indicator of Selector, drawer will close.
*/
elSelector.addEventListener("click", function(event) {
var target = event.target;
if (tau.support.shape.circle) {
// 'ui-selector-indicator' is default indicator class name of Selector component
if (target.classList.contains("ui-selector-indicator")) {
tau.closePopup(popupCircle);
}
}
});
}());
关于html - 如何在可穿戴式Web TIZEN应用中同时启用页面指示器和更多选项？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42745180/