API Reference: UI.SwipeView
SwipeView is a view that holds a page list inside so that users can traverse those pages via swiping over.
TypeScript code blocks include examples of how to implement, override and components within the theme. You can create page with the UI Editor to make your page compatible with theming and then you can implement themable components programmatically. Once the page is created with the UI Editor, it generates a class under scripts/generated/pages
. You can then extend that class with the following TypeScript classes.
onLoad method of a SwipeView's page is triggered when swipe occurs on Android. On iOS, onLoad method of all pages are triggered at the beginning.
import PageSampleDesign from 'generated/pages/pageSample';import FlexLayout = require('sf-core/ui/flexlayout');import Application = require('sf-core/application');import Label = require('sf-core/ui/label');import SwipeView = require('sf-core/ui/swipeview');import Sample1 from "pages/sample1";import Sample2 from "pages/sample2";import Sample3 from "pages/sample3";//You should create new Page from UI-Editor and extend with it.export default class Sample extends PageSampleDesign {swipeView: SwipeView;labelState: Label;constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.onLoad = onLoad.bind(this, this.onLoad.bind(this));this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;}}/*** @event onShow* This event is called when a page appears on the screen (everytime).* @param {function} superOnShow super onShow function* @param {Object} parameters passed from Router.go function*/function onShow(superOnShow: () => void) {const { headerBar } = this;superOnShow();Application.statusBar.visible = false;headerBar.visible = false;}/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();this.swipeView = new SwipeView({page: this,pages: [Sample1, Sample2, Sample3],onStateChanged: (state: any): void => {if (SwipeView.State.IDLE === state) {this.labelState.text = "State: IDLE";} else {this.labelState.text = "State: DRAGGING";}}});this.layout.addChild(this.swipeView, "swipeView", ".sf-swipeView", {width: 300,maxHeight: 300,marginTop: 50});this.labelState = new Label({text: "Waiting for State"});this.layout.addChild(this.labelState, "labelState", ".sf-label", {width: 200, height: 65})this.dispatch({type: "updateUserStyle",userStyle: {flexProps: {flexDirection: "COLUMN"}}});}
import PgMessagesDesign from 'generated/pages/pgMessages';import FlexLayout = require('sf-core/ui/flexlayout');import Application = require('sf-core/application');//You should create new Page from UI-Editor and extend with it.export default class Sample extends PgMessagesDesign {constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.onLoad = onLoad.bind(this, this.onLoad.bind(this));this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;}}/*** @event onShow* This event is called when a page appears on the screen (everytime).* @param {function} superOnShow super onShow function* @param {Object} parameters passed from Router.go function*/function onShow(superOnShow: () => void) {const { headerBar, myMenu } = this;superOnShow();Application.statusBar.visible = false;headerBar.visible = false;}/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();this.dispatch({type: "updateUserStyle",userStyle: {backgroundColor: "#FF0000"}})}
import PgMessagesDesign from 'generated/pages/pgMessages';import FlexLayout = require('sf-core/ui/flexlayout');import Application = require('sf-core/application');//You should create new Page from UI-Editor and extend with it.export default class Sample extends PgMessagesDesign {constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.onLoad = onLoad.bind(this, this.onLoad.bind(this));this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;}}/*** @event onShow* This event is called when a page appears on the screen (everytime).* @param {function} superOnShow super onShow function* @param {Object} parameters passed from Router.go function*/function onShow(superOnShow: () => void) {const { headerBar, myMenu } = this;superOnShow();Application.statusBar.visible = false;headerBar.visible = false;}/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();this.dispatch({type: "updateUserStyle",userStyle: {backgroundColor: "#00FF00"}})}
import PgMessagesDesign from 'generated/pages/pgMessages';import FlexLayout = require('sf-core/ui/flexlayout');import Application = require('sf-core/application');//You should create new Page from UI-Editor and extend with it.export default class Sample extends PgMessagesDesign {constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.onLoad = onLoad.bind(this, this.onLoad.bind(this));this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;}}/*** @event onShow* This event is called when a page appears on the screen (everytime).* @param {function} superOnShow super onShow function* @param {Object} parameters passed from Router.go function*/function onShow(superOnShow: () => void) {const { headerBar, myMenu } = this;superOnShow();Application.statusBar.visible = false;headerBar.visible = false;}/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();this.dispatch({type: "updateUserStyle",userStyle: {backgroundColor: "#0000FF"}})}
const extend = require("js-base/core/extend");const Page = require("sf-core/ui/page");const FlexLayout = require('sf-core/ui/flexlayout');const SwipeView = require('sf-core/ui/swipeview');const Label = require('sf-core/ui/label');const Color = require('sf-core/ui/color');var Page1 = extend(Page)(function(_super, params) {_super(this, params);this.onLoad = function() {this.layout.backgroundColor = Color.RED;}.bind(this);});var Page2 = extend(Page)(function(_super, params) {_super(this, params);this.onLoad = function() {this.layout.backgroundColor = Color.YELLOW;}.bind(this);});var Page3 = extend(Page)(function(_super, params) {_super(this, params);this.onLoad = function() {this.layout.backgroundColor = Color.BLUE;}.bind(this);});var Page4 = extend(Page)(function(_super, params) {_super(this, params);this.onLoad = function() {this.layout.backgroundColor = Color.GREEN;}.bind(this);});var SwipeViewPage = extend(Page)(function(_super) {var self = this;_super(this);this.onLoad = function() {Application.statusBar.visible = false;self.headerBar.visible = false;self.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;self.layout.justifyContent = FlexLayout.JustifyContent.FLEX_START;self.layout.alignItems = FlexLayout.AlignItems.CENTER;var swipeView = new SwipeView({page: self,width:300, maxHeight:300, marginTop:50,pages: [Page1, Page2, Page3, Page4],onStateChanged: function(state) {if (SwipeView.State.IDLE === state) {labelState.text = "State: IDLE";} else {labelState.text = "State: DRAGGING";}}});self.layout.addChild(swipeView);var labelState = new Label({width:200, height:65,text: "Waiting for State",});self.layout.addChild(labelState);self.layout.applyLayout();};});module.exports = SwipeViewPage;
Gesture actions have performed differently in the examples. This is why swiping at left is slow.
It is a very common practice to use page indicators with SwipeView. Indicators might display following feats.
Showing active page
Press to change active page
Animate during the swipe
Should not be enabled during the swipe
Changing of the pages can be triggered from two different sources:
User page swipe
Indicator press
Each of them affecting each other. In order to prevent recursively circular calls, keeping track of the action is needed. To keep the track, in this example a property to the swipeView is added: indicatorScrollTriggered
SwipeView.onPageScrolled event can be used for indicate which page is active.
In this case, as the swipe action is taken by the user, the indicator bar will slide accordingly following the finger movement.
swipeView.onPageScrolled = function onPageScrolledHandler(index, offset){if(swipeView.indicatorScrollTriggered)return; //prevent circular callvar left = ((swipeView.width/PAGE_COUNT) * index) + offset/PAGE_COUNT;if(indicator.left != left){indicator.left = left;page.layout.applyLayout();}};
In this case, dots are used to indicate the active page. Dot style will be changed as the page is changed.
const pushClassNames = require("@smartface/contx/lib/styling/action/pushClassNames");const removeClassName = require("@smartface/contx/lib/styling/action/removeClassName");swipeView.onPageScrolled = function onPageScrolledHandler(index, offset){indicators.forEach(indicator, indicatorIndex) => {if(indicatorIndex === index)indicator.dispatch(pushClassNames(ACTIVE_CLASS_NAME));elseindicator.dispatch(removeClassName(ACTIVE_CLASS_NAME));});};
The user can press the indicators or buttons to set the "active" of the swipe page. In that case, if a sliding indicator is used, animation of the indicator has to be taken care of with checking the circular check.
const Animator = require('sf-core/ui/animator');const System = require('sf-core/device/system');swipeHeaderButton1.onPress = setActivePage.bind(page, 0);swipeHeaderButton2.onPress = setActivePage.bind(page, 1);swipeHeaderButton3.onPress = setActivePage.bind(page, 2);function setActivePage(index) {var left = ((swipeView.width/PAGE_COUNT) * index)/PAGE_COUNT;var animationRootView = System.OS === "iOS" ? page.layout : indicator.getParent;if(indicator.left != left){indicatorScrollTriggered = true;Animator.animate(animationRootView, 500, ()=> {indicator.left = left;}).complete(()=>{indicatorScrollTriggered = false;});}}
Touches can be managed via SwipeView. onStateChanged event
swipeView.onStateChanged = function(state) {if (SwipeView.State.IDLE === state) {swipeHeaderButton1.touchEnabled = swipeHeaderButton2.touchEnabled = swipeHeaderButton3.touchEnabled = true;} else {swipeHeaderButton1.touchEnabled = swipeHeaderButton2.touchEnabled = swipeHeaderButton3.touchEnabled = false;}};
SwipeView is using page classes to display the content. In that sense, if the pages are similar, the developer does not want to create duplicate pages. For that approach using extended pages is recommended.
import PageSampleDesign from 'generated/pages/pageSample';import FlexLayout = require('sf-core/ui/flexlayout');import Application = require('sf-core/application');import Label = require('sf-core/ui/label');import SwipeView = require('sf-core/ui/swipeview');import PgMessagesDesign from 'generated/pages/pgMessages';//You should create new Page from UI-Editor and extend with it.export default class Sample extends PageSampleDesign {swipeView: SwipeView;labelState: Label;constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.onLoad = onLoad.bind(this, this.onLoad.bind(this));this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;}sampleFactory(pageIndex: number) {return class Sample extends PgMessagesDesign {pageIndex: number = pageIndex;constructor() {super({onLoad: () => {console.log("pageIndex" + pageIndex);}});}}}}/*** @event onShow* This event is called when a page appears on the screen (everytime).* @param {function} superOnShow super onShow function* @param {Object} parameters passed from Router.go function*/function onShow(superOnShow: () => void) {const { headerBar } = this;superOnShow();Application.statusBar.visible = false;headerBar.visible = false;}/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();this.swipeView = new SwipeView({page: this,pages: [this.sampleFactory(0), this.sampleFactory(2), this.sampleFactory(3)],onStateChanged: (state: any): void => {if (SwipeView.State.IDLE === state) {this.labelState.text = "State: IDLE";} else {this.labelState.text = "State: DRAGGING";}}});this.layout.addChild(this.swipeView, "swipeView", ".sf-swipeView", {width: 300,maxHeight: 300,marginTop: 50});this.labelState = new Label({text: "Waiting for State"});this.layout.addChild(this.labelState, "labelState", ".sf-label", {width: 200, height: 65})this.dispatch({type: "updateUserStyle",userStyle: {flexProps: {flexDirection: "COLUMN"}}});}
const extend = require("js-base/core/extend");const SwipeView = require('sf-core/ui/swipeview');const SwipePageTemplate = require("swipePageTemplate"); //This page might be designed via UI editorfunction SwipePageFactory(index) {const SwipePage = extend(SwipePageTemplate)(function(_super, params) {_super(this, params);this.pageIndex = index;});return SwipePage;}function onLoad(superOnLoad) {superOnLoad();const page = this;var swipeView = new SwipeView({page,maxHeight: 300,marginTop: 10,pages: [SwipePageFactory(0), SwipePageFactory(1),SwipePageFactory(2), SwipePageFactory(3)]});page.layout.addChild(swipeView);}
const PgSwipePageTemplateDesign = require('ui/ui_pgSwipePageTemplateDesign');const extend = require("js-base/core/extend");const PgSwipe = extend(PgSwipeDesign)(function(_super) {_super(this);this.onShow = onShow.bind(this, this.onShow.bind(this));this.onLoad = onLoad.bind(this, this.onLoad.bind(this));});function onShow(superOnShow) {superOnShow();//This event is fired evertime page is shown, when page swipe index changes//Do dynamic data binding here//Android onShow is triggered after change animation is finished, iOS is fired before. For that reason the content on swipePage might updated later in AndroidbindDataToPage(this, this.pageIndex); //pageIndex is given when this page is extended}function onLoad(superOnLoad) {superOnLoad();//This event is fired once when page is loaded to swipeView//Do static data binding herebindDataToPage(this, this.pageIndex); //pageIndex is given when this page is extended}
There is no interaction or relation between the swipe page instances and the swipeView. If a data updates on the main page, swipe pages can be via several ways
A separate state module JS code can be created. We recommend using redux for state management. Both the main page and the swipe pages are going to subscribe to same state manager. This is helpful when the main page is a singleton and no other routes are created for it.
import PageSampleDesign from 'generated/pages/pageSample';import FlexLayout = require('sf-core/ui/flexlayout');import Application = require('sf-core/application');import Button = require('sf-core/ui/button');import SwipeView = require('sf-core/ui/swipeview');import SwipePage1 from "swipePage1";import SwipePage2 from "swipePage2";import SwipePage3 from "swipePage3";import stateStore = require("stateStore");//You should create new Page from UI-Editor and extend with it.export default class Sample extends PageSampleDesign {swipeView: SwipeView;labelState: Label;constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.onLoad = onLoad.bind(this, this.onLoad.bind(this));this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;}}/*** @event onShow* This event is called when a page appears on the screen (everytime).* @param {function} superOnShow super onShow function* @param {Object} parameters passed from Router.go function*/function onShow(superOnShow: () => void) {const { headerBar } = this;superOnShow();Application.statusBar.visible = false;headerBar.visible = false;}/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();this.swipeView = new SwipeView({page: this,pages: [SwipePage1, SwipePage2, SwipePage3]});this.layout.addChild(this.swipeView, "swipeView", ".sf-swipeView", {width: 300,maxHeight: 300,marginTop: 50});stateStore.subscribe(function (action) {let state = stateStore.getState();// Do logic});this.btn = new Button({text: "Save State",onPress: () => {stateStore.dispatch({type: "Update From Main",action: "logic"});}});this.layout.addChild(this.btn, "btn", ".sf-button", {width: 200, height: 65})this.dispatch({type: "updateUserStyle",userStyle: {flexProps: {flexDirection: "COLUMN"}}});}
import PgMessagesDesign from 'generated/pages/pgMessages';import FlexLayout = require('sf-core/ui/flexlayout');import Application = require('sf-core/application');import stateStore = require("stateStore");//You should create new Page from UI-Editor and extend with it.export default class Sample1 extends PgMessagesDesign {constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.onLoad = onLoad.bind(this, this.onLoad.bind(this));this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;}}/*** @event onShow* This event is called when a page appears on the screen (everytime).* @param {function} superOnShow super onShow function* @param {Object} parameters passed from Router.go function*/function onShow(superOnShow: () => void) {const { headerBar, myMenu } = this;superOnShow();Application.statusBar.visible = false;headerBar.visible = false;}/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();stateStore.subscribe(function (action) {let state = stateStore.getState();// Do logic});this.dispatch({type: "updateUserStyle",userStyle: {backgroundColor: "#FF0000"}});}
import PgMessagesDesign from 'generated/pages/pgMessages';import FlexLayout = require('sf-core/ui/flexlayout');import Application = require('sf-core/application');import stateStore = require("stateStore");//You should create new Page from UI-Editor and extend with it.export default class Sample1 extends PgMessagesDesign {constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.onLoad = onLoad.bind(this, this.onLoad.bind(this));this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;}}/*** @event onShow* This event is called when a page appears on the screen (everytime).* @param {function} superOnShow super onShow function* @param {Object} parameters passed from Router.go function*/function onShow(superOnShow: () => void) {const { headerBar, myMenu } = this;superOnShow();Application.statusBar.visible = false;headerBar.visible = false;}/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();stateStore.subscribe(function (action) {let state = stateStore.getState();// Do logic});this.btn = new Button({text: "Save State",onPress: () => {stateStore.dispatch({type: "Update From Main",action: "logic"});}});this.layout.addChild(this.btn, "btn", ".sf-button", {width: 200, height: 65})this.dispatch({type: "updateUserStyle",userStyle: {backgroundColor: "#00FF00"}});}
const PgMainPageDesign = require('ui/ui_pgMainPageDesign');const stateStore = require("stateStore");const extend = require("js-base/core/extend");const SwipeView = require('sf-core/ui/swipeview');const SwipePage1 = require("swipePage1");const SwipePage2 = require("swipePage2");const SwipePage3 = require("swipePage3");const PgMain = extend(PgMainPageDesign)(function(_super) {_super(this);this.onShow = onShow.bind(this, this.onShow.bind(this));this.onLoad = onLoad.bind(this, this.onLoad.bind(this));});function onShow(superOnShow) {superOnShow();}function onLoad(superOnLoad) {superOnLoad();const page = this;var swipeView = new SwipeView({page,pages: [SwipePage1, SwipePage2, SwipePage3]});page.layout.addChild(swipeView);stateStore.subscribe(function(action) {var state = stateStore.getState();// Do logic});page.btn.onPress = () => {state.dispatch({type: "Update From Main",action: "logic"};}
const extend = require("js-base/core/extend");const Page = require("sf-core/ui/page");const Color = require('sf-core/ui/color');const stateStore = require("stateStore");const SwipePage1 = extend(Page)(function(_super, params) {_super(this, params);this.onLoad = function() {this.layout.backgroundColor = Color.RED;stateStore.subscribe(function(action) {var state = stateStore.getState();// Do logic});}.bind(this);});module.exports = exports = SwipePage1;
const extend = require("js-base/core/extend");const Page = require("sf-core/ui/page");const Color = require('sf-core/ui/color');const stateStore = require("stateStore");const Button = require('sf-core/ui/button');const SwipePage2 = extend(Page)(function(_super, params) {_super(this, params);this.onLoad = function() {this.layout.backgroundColor = Color.YELLOW;stateStore.subscribe(function(action) {var state = stateStore.getState();// Do logic});this.layout.add(new Button({text: "UpdateState",onPress: ()=> {state.dispatch({type: "Update From Main",action: "logic"};}});}.bind(this);});module.exports = exports = SwipePage2;
This is quite similar to passing the index to the swipe page. In this case, in addition to the index, main page instance is passed too.
import PageSampleDesign from 'generated/pages/pageSample';import FlexLayout = require('sf-core/ui/flexlayout');import Application = require('sf-core/application');import Label = require('sf-core/ui/label');import SwipeView = require('sf-core/ui/swipeview');import PgMessagesDesign from 'generated/pages/pgMessages';import Page = require("sf-core/ui/page");//You should create new Page from UI-Editor and extend with it.export default class Sample extends PageSampleDesign {swipeView: SwipeView;labelState: Label;constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.onLoad = onLoad.bind(this, this.onLoad.bind(this));this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;}sampleFactory(pageIndex: number, pageInstance: Page) {return class Sample extends PgMessagesDesign {pageIndex: number = pageIndex;pageInstance: Page = pageInstance;constructor() {super({onLoad: () => {console.log("pageIndex" + pageIndex);}});}}}}/*** @event onShow* This event is called when a page appears on the screen (everytime).* @param {function} superOnShow super onShow function* @param {Object} parameters passed from Router.go function*/function onShow(superOnShow: () => void) {const { headerBar } = this;superOnShow();Application.statusBar.visible = false;headerBar.visible = false;}/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();this.swipeView = new SwipeView({page: this,pages: [this.sampleFactory(0), this.sampleFactory(2), this.sampleFactory(3)],onStateChanged: (state: any): void => {if (SwipeView.State.IDLE === state) {this.labelState.text = "State: IDLE";} else {this.labelState.text = "State: DRAGGING";}}});this.layout.addChild(this.swipeView, "swipeView", ".sf-swipeView", {width: 300,maxHeight: 300,marginTop: 50});this.labelState = new Label({text: "Waiting for State"});this.layout.addChild(this.labelState, "labelState", ".sf-label", {width: 200, height: 65})this.dispatch({type: "updateUserStyle",userStyle: {flexProps: {flexDirection: "COLUMN"}}});}
const PgMainPageDesign = require('ui/ui_pgMainPageDesign');const extend = require("js-base/core/extend");const SwipeView = require('sf-core/ui/swipeview');const SwipePageTemplate = require("swipePageTemplate"); //This page might be designed via UI editorfunction SwipePageFactory(index) {const mainPage = this;const SwipePage = extend(SwipePageTemplate)(function(_super, params) {_super(this, params);this.pageIndex = index;this.mainPage = mainPage;});return SwipePage;}const PgMain = extend(PgMainPageDesign)(function(_super) {_super(this);this.onShow = onShow.bind(this, this.onShow.bind(this));this.onLoad = onLoad.bind(this, this.onLoad.bind(this));this.swipePages = []; //Swipe Pages will register them selves to this property. Later they can be accessed using this.});function onShow(superOnShow) {superOnShow();}function onLoad(superOnLoad) {superOnLoad();const page = this;const modifiedSwipePageFactory = SwipePageFactory.bind(this);var swipeView = new SwipeView({page,maxHeight: 300,marginTop: 10,pages: [modifiedSwipePageFactory(0), modifiedSwipePageFactory(1),modifiedSwipePageFactory(2), modifiedSwipePageFactory(3)]});page.layout.addChild(swipeView);}
const PgSwipePageTemplateDesign = require('ui/ui_pgSwipePageTemplateDesign');const extend = require("js-base/core/extend");const PgSwipe = extend(PgSwipeDesign)(function(_super) {_super(this);this.onShow = onShow.bind(this, this.onShow.bind(this));this.onLoad = onLoad.bind(this, this.onLoad.bind(this));});function onShow(superOnShow) {superOnShow();}function onLoad(superOnLoad) {superOnLoad();this.mainPage.swipePages[this.pageIndex] = this; //Registers it self to the Main Page// main page can be accessed using this.mainPage// other swipe pages can be accessed using this.mainPage.swipePages[otherIndex]}
SwipeView is a heavy component. It is performing low (especially on Android) when the number swipe pages are high. Try to limit the number of pages below 20, bellow 15 is better. In order to change the number of pages, assignment of the pages property of the swipeView is required. This is causing recreating all of the swipe pages (again).