TAU: Как мы используем PageIndicator для носимых устройств - PullRequest
Новая
       26

TAU: Как мы используем PageIndicator для носимых устройств

0 голосов
/ 26 октября 2019

Я пытаюсь использовать Page Indicator в приложении Tizen Wearable для Gear S3 Frontier. Когда я использую код, вставленный туда, Он отлично работает только для текста . Например, когда я пытаюсь добавить элементы управления в каждый раздел (отображается как страница на экране), это не работает. Даже если я установлю фоновое изображение, весь дизайн будет разбросан. Я попробовал несколько подходов, включая ответ, данный на этот вопрос

Мой вывод:

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

1 Ответ

1 голос
/ 07 ноября 2019

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, пользователь может перейти от первого раздела к последнему и наоборот.

...