时间戳

首页 > 解决方案 > Galaxy：创建后动态更新 PageIndicator

tizen-web-app - Galaxy：创建后动态更新 PageIndicator

问题描述

我正在使用Tizen网络应用程序为Samsung Gear S3和Samsung Galaxy 手表开发应用程序。

我正在尝试使用 aPageIndicator来显示用户滚动浏览 API 调用后生成的动态页面数量，并且当用户执行某些操作时这些页面数量会发生变化。文档：https ://developer.tizen.org/dev-guide/3.0.0/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_PageIndicator.htm

创建 PageIndicator 后是否可以更新页面数量？

我尝试破坏它并重新创建它，但这似乎不起作用。

代码

function PageController() {
    /* Keep track of scope*/
    var _this = this;

    /* Tau elements */
    var pageIndicator = null;

    this.showIndicator = function(active, total) {
        if (pageIndicator != null) {
            pageIndicator.destroy();
        }

        var elPageIndicator = document.getElementById("pageIndicator");
        pageIndicator = tau.widget.PageIndicator(
          elPageIndicator, {maxPage: total, numberOfPages: total});

        console.log("Created");
        console.log(pageIndicator);
        pageIndicator.setActive(active);
    }
}

我还尝试了使用控制台记录器时注意到对象中存在的 configure() 或 _configure() 函数，但没有成功。

代码

function PageController() {
    /* Keep track of scope*/
    var _this = this;

    /* Tau elements */
    var pageIndicator = null;

    this.showIndicator = function(active, total) {
        if (pageIndicator == null) {
            var elPageIndicator = document.getElementById("pageIndicator");
            pageIndicator = tau.widget.PageIndicator(
              elPageIndicator, {maxPage: total, numberOfPages: total});

            console.log("Created");
            console.log(pageIndicator);
        }

        console.log("Reconfigure");
        pageIndicator.configure({maxPage: total, numberOfPages: total});
        pageIndicator.refresh();
        pageIndicator.setActive(active);
        console.log(pageIndicator);
    }
}

还尝试通过 pagindicatorobject.options.maxPage = my new amount 和 pageindicatorobject.options.amountPages = my new amount 手动设置选项，之后我尝试执行 refresh() 不起作用。

代码

function PageController() {
    /* Keep track of scope*/
    var _this = this;

    /* Tau elements */
    var pageIndicator = null;

    this.showIndicator = function(active, total) {
        if (pageIndicator == null) {
            var elPageIndicator = document.getElementById("pageIndicator");
            pageIndicator = tau.widget.PageIndicator(
              elPageIndicator, {maxPage: total, numberOfPages: total});

            console.log("Created");
            console.log(pageIndicator);
        }

        console.log("Reconfigure");
        pageIndicator.options.maxPage = total;
        pageIndicator.options.numberOfPages = total;
        pageIndicator.refresh();
        pageIndicator.setActive(active);
        console.log(pageIndicator);
    }
}

在每种情况下运行以下代码

var pageController = new PageController();
pageController.showIndicator(x, y);

它总是会pageIndicator在控制台中返回相同的结果，而在给出新配置时永远不会替换它。我该如何解决这个问题？

标签： tizen-web-appsamsung-galaxy

解决方案

请查看UI 组件(Tizen)中的“设置 UI 组件选项”部分。

要动态更改选项，您可以使用小部件option方法。在示例中：

    console.log("Reconfigure");
    pageIndicator.option({maxPage: total, numberOfPages: total})
    pageIndicator.setActive(active);
    console.log(pageIndicator);
}

在此示例中，无需调用该refresh()方法。

或者您可以使用 HTMLElement 数据集在基本小部件 HTMLElement 上设置选项，然后在小部件上调用刷新。

例子：

    console.log("Reconfigure");
    elPageIndicator.dataset['maxPage'] = total;
    elPageIndicator.dataset['numberOfPages'] = total;
    pageIndicator.refresh();
    pageIndicator.setActive(active);
    console.log(pageIndicator);
}

推荐阅读