Swipe to pop is now available!
The Onsen UI team has been working to provide you with exciting new features at every new release. Behold as here come some more!
In this article we introduce the features added in recent versions
- Swipe to pop (2.5.0)
<ons-page>and Page Lifecycle Hooks (2.4.0)
- Caching / Preloading External Templates (2.4.0)
Swipe to pop (2.5.0)
In Onsen UI 2.5.0 and above, you can use swipe to pop feature by attaching
swipeable attribute to
<ons-navigator>. This feature enables the popping of pages by swiping the left edge of a page instead of pushing a back button, a common behavior in native iOS.
There are two additional options for controlling swipe to pop:
swipe-target-width attribute defines the area which accepts the swipe event for swipe to pop. Set a positive pixel value for this attribute (default:
swipe-threshold attribute adjusts how much do users have to swipe the page in order to pop it. You can set floating points between
Here is an example usage of
Note that swipe to pop is disabled in the Android version of
<ons-navigator> by default because the Material Design does not include that feature.
If you want to enable swipe to pop in the Material version of
<ons-navigator> anyway just use
swipeable="force". In that case, please keep in mind that you should use
slide-md animation since other animations such as
lift-md (default value) lead to a weird behavior.
If you are using AngularJS 1.x binding or Angular 2+ binding, you can just use
swipe-threshold attributes as same as the examples above.
If you are using React binding with
<Navigator>, you can just use
swipe-threshold props but in the case of
<RouterNavigator> you have to use an additional
swipePop prop according to this example.
If you are using Vue binding, you can just attach
swipe-threshold to the
<template> Support (2.4.0)
As we show above in the examples of swipe to pop, Onsen UI 2.4.0 and above has support for native
<template> element can be used in Android 4.4+ and iOS 9.0+.
<ons-template> element is still available for backward compatibility, but there is no advantage in using it. Therefore, we recommend that you use
<template> elements if you are planning to create new Onsen UI apps.
<ons-page> and Page Lifecycle Hooks (2.4.0)
In Onsen UI 2.4.0 and above you can directly write JS statements which are invoked when
<ons-page> is appended into the DOM tree by embedding a
<script> elements inside the
<ons-page> element. Also, new properties
onDestroy are now available. Combining these new features, let’s check an example of how to define the layout and behavior of a page:
Note that you have to put at most one
<script>element just under the
<ons-page>element. Also, you have to use
<ons-template>if you want to grab the
<ons-page>in page templates. If you put your
<ons-template>it runs before the template is appended into the DOM tree by navigators or splitters.
Caching / Preloading External Templates (2.4.0)
As you may know methods like
ons-splitter-content#load and a few others need to load external files. However sending HTTP requests to the same external file multiple times leads to performance degration.
To deal with this problem, Onsen UI 2.4.0 and above caches external files once they are loaded.
But a problem still exists. If we send a first HTTP request to an external file at the timing of
load, it causes a performance problem in environments that have a slow network or slow servers. So Onsen UI 2.4.0 and above provides
ons.preload function which enables you to send HTTP requests to external files ahead of time.
You can use
ons.preload function as shown below.
ons.preload is an asynchronous function and its Promise resolves after loading the external files.
ons.preload function is not required to be placed in
<head> element. You can use this function wherever you prefer.
Onsen UI is an open source library used to create the user interface of hybrid apps. You can find more information on our GitHub page. If you like Onsen UI, please don’t forget to give us a star! ★★★★★