Exploring the Page Indicator within a Tizen Wearable Application for Gear S3 Frontier has been an interesting journey. Despite successful implementation with text content, adding controls to each section or incorporating background images has proven challenging. Various strategies have been attempted, including referencing solutions from this related discussion
Current Output:
https://i.stack.imgur.com/ibbYf.png https://i.stack.imgur.com/Cngtl.png
HTML Snippet:
Page1 of 2
Page2 of 2
CSS Styles:
.ui-content section {
overflow: hidden;
overflow-y: auto;
text-align: center;
}
JavaScript Logic:
/*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
* Perform necessary tasks and set up event listeners
*/
page.addEventListener( "pagebeforeshow", function() {
// Initialize PageIndicator
pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sections.length });
pageIndicator.setActive(0);
// Establish SectionChanger object
sectionChanger = new tau.widget.SectionChanger(changer, {
circular: true,
orientation: "horizontal",
useBouncingEffect: true
});
});
/**
* pagehide event handler
* Clean up and remove event listeners
*/
page.addEventListener( "pagehide", function() {
// Release resources
sectionChanger.destroy();
pageIndicator.destroy();
});
/**
* sectionchange event handler
*/
pageIndicatorHandler = function (e) {
pageIndicator.setActive(e.detail.active);
};
changer.addEventListener("sectionchange", pageIndicatorHandler, false);
}());
An error message is also present:
file:///lib/tau/wearable/js/tau.min.js (20) :[tau][10/24/2019, 1:28:31