TAU：我们如何将PageIndicator用于可穿戴设备

Question

我正在尝试Gear S3 Frontier的Tizen可穿戴应用程序中的Page Indicator。当我使用粘贴在此处的代码时，仅适用于文本。例如。当我尝试在每个部分上添加控件时（如屏幕上的页面所示），它不起作用。即使设置背景图像，整个设计也会变得分散。我尝试了一些方法，包括在this question

上给出的答案

我的输出：

HTML代码：

                                                                                                     

第1页，共2页

                                                                  

第2页，共2页

                                                           

CSS：

.ui-content section {
    overflow: hidden;
    overflow-y: auto;
    text-align: center;
}

JavaScript：

 /*global tau */
(function() {

var page = document.getElementById("taskListPage"),
    changer = document.getElementById("hsectionchanger"),
    sections = document.querySelectorAll("section"),
    sectionChanger,
    elPageIndicator = document.getElementById("pageIndicator"),
    pageIndicator,
    pageIndicatorHandler;

/**
 * pagebeforeshow event handler
 * Do preparatory works and adds event listeners
 */
page.addEventListener( "pagebeforeshow", function() {
    // make PageIndicator
    pageIndicator =  tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sections.length });
    pageIndicator.setActive(0);
    // make SectionChanger object
    sectionChanger = new tau.widget.SectionChanger(changer, {
        circular: true,
        orientation: "horizontal",
        useBouncingEffect: true
    });
});

/**
 * pagehide event handler
 * Destroys and removes event listeners
 */
page.addEventListener( "pagehide", function() {
    // release object
    sectionChanger.destroy();
    pageIndicator.destroy();
});

/**
 * sectionchange event handler
 */
pageIndicatorHandler = function (e) {
    pageIndicator.setActive(e.detail.active);
};

changer.addEventListener("sectionchange", pageIndicatorHandler, false);

}());

我也遇到错误： file:///lib/tau/wearable/js/tau.min.js (20) :[tau][10/24/2019, 1:28:31

Answer 1

未附加HTML代码。根据屏幕，我假设您的应用程序包含两个部分。具有“圆形”选项的SectionChanger窗口小部件只能使用包含至少3个部分的应用程序构建，因此控制台中的错误。 请将换节器的循环选项更改为false：

page.addEventListener( "pagebeforeshow", function() {
    // make PageIndicator
    pageIndicator =  tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sections.length });
    pageIndicator.setActive(0);
    // make SectionChanger object
    sectionChanger = new tau.widget.SectionChanger(changer, {
        circular: true,
        orientation: "horizontal",
        useBouncingEffect: true
    });
});

进入：

page.addEventListener( "pagebeforeshow", function() {
    // make PageIndicator
    pageIndicator =  tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sections.length });
    pageIndicator.setActive(0);
    // make SectionChanger object
    sectionChanger = new tau.widget.SectionChanger(changer, {
        circular: false,
        orientation: "horizontal",
        useBouncingEffect: true
    });
});

此选项负责在部分模式之间切换。如果设置为true，则用户可以从第一部分移到最后一部分，反之亦然。