NativeScript plugin to use Pull to Refresh on any view.
Android | iOS |
---|---|
tns plugin add nativescript-pulltorefresh
<page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:PullRefresh="nativescript-pulltorefresh"
loaded="pageLoaded">
<PullRefresh:PullToRefresh refresh="refreshList">
<list-view items="{{ users }}">
<list-view.itemTemplate>
<label text="{{ name }}" row="0" col="1"textWrap="true" class="message" />
</list-view.itemTemplate>
</list-view>
</PullRefresh:PullToRefresh>
</page>
function refreshList(args) {
// Get reference to the PullToRefresh component;
var pullRefresh = args.object;
// Do work here... and when done call set refreshing property to false to stop the refreshing
loadItems().then((resp) => {
// ONLY USING A TIMEOUT TO SIMULATE/SHOW OFF THE REFRESHING
setTimeout(() => {
pullRefresh.refreshing = false;
}, 1000);
}, (err) => {
pullRefresh.refreshing = false;
});
}
exports.refreshList = refreshList;
import { registerElement } from "nativescript-angular/element-registry";
registerElement("PullToRefresh", () => require("nativescript-pulltorefresh").PullToRefresh);
refreshList(args) {
var pullRefresh = args.object;
setTimeout(function () {
pullRefresh.refreshing = false;
}, 1000);
}
<PullToRefresh (refresh)="refreshList($event)">
<ListView [items]="itemList" >
<template let-item="item">
<Label [text]="item.id"></Label>
</template>
</ListView>
</PullToRefresh>
import Vue from 'nativescript-vue';
Vue.registerElement(
'PullToRefresh',
() => require('nativescript-pulltorefresh').PullToRefresh
);
<template>
<Page>
<PullToRefresh @refresh="refreshList">
<ListView for="item in listOfItems" @itemTap="onItemTap">
<v-template>
<!-- Shows the list item label in the default color and style. -->
<label :text="item.text" />
</v-template>
</ListView>
</PullToRefresh>
</Page>
</template>
<script>
export default {
methods: {
refreshList(args) {
var pullRefresh = args.object;
setTimeout(function() {
pullRefresh.refreshing = false;
}, 1000);
}
}
};
</script>
If you are using webpack with uglify for Android, you must add TNS_SwipeRefreshListener to the mangle exception list.
if (uglify) {
config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
// Work around an Android issue by setting compress = false
const compress = platform !== "android";
config.plugins.push(new UglifyJsPlugin({
uglifyOptions: {
mangle: { reserved: [ ...nsWebpack.uglifyMangleExcludes, "TNS_SwipeRefreshListener" ] },
compress,
}
}));
}
- refresh : function required
- refreshing: boolean - Notifies the widget that the refresh state has changed.