This plugin has been migrated to nativescript-community as of June 24, 2021.The repo can be found here: https://github.com/nativescript-community/ui-pulltorefresh
ns plugin add @nstudio/nativescript-pulltorefresh
tns plugin add @nstudio/nativescript-pulltorefresh@2.0.0
Android | iOS |
---|---|
<page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:PullRefresh="@nstudio/nativescript-pulltorefresh"
loaded="pageLoaded">
<PullRefresh:PullToRefresh refresh="refreshList" indicatorFillColor="#fff000" indicatorColor="#3489db">
<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("@nstudio/nativescript-pulltorefresh").PullToRefresh);
refreshList(args) {
const pullRefresh = args.object;
setTimeout(function () {
pullRefresh.refreshing = false;
}, 1000);
}
<PullToRefresh
(refresh)="refreshList($event)"
indicatorFillColor="#fff000"
indicatorColor="#3489db"
>
<ListView [items]="itemList">
<template let-item="item">
<label [text]="item.id"></label>
</template>
</ListView>
</PullToRefresh>
import Vue from 'nativescript-vue';
Vue.registerElement(
'PullToRefresh',
() => require('@nstudio/nativescript-pulltorefresh').PullToRefresh
);
<template>
<Page>
<PullToRefresh
@refresh="refreshList"
indicatorFillColor="#fff000"
indicatorColor="#3489db"
>
<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>
NativeScript 可以使用 Javascript,CSS, XML 创建真正的 Native 跨平台应用,支持 iOS Android,NativeScript 将您的跨平台代码翻译成目标平台的代码。 UI 使用 XML 描述,CSS 样式,在编译时将 UI 转化成本地原生代码,最终得到正在的 Native 原生应用。 Telerik 公开了用于创建安卓、iOS和Windows Unive
NativeScript Command-Line Interface The NativeScript CLI lets you create, build, and deploy NativeScript-based apps on iOS and Android devices. Get it using: npm install -g nativescript What is Native
NativeScript-Snackbar �� �� �� NativeScript plugin for Material Design SnackBar component. Installation: NativeScript 7+:tns plugin add @nstudio/nativescript-snackbar NativeScript version prior to 7:t
Nativescript-Ripple This plugin aims to bring a native (or close to native) ripple implementation on Android and iOS. The android version uses a RippleDrawable and conserves the previous background, a
NativeScript-FloatingActionButton NativeScript plugin for Material Design Floating Action Button UI component. Installation Nativescript 7+: ns plugin add @nstudio/nativescript-floatingactionbutton Na
NativeScript CardView A NativeScript plugin to provide an XML widget to implement the Material Design CardView component. Installation NativeScript 7+: ns plugin add @nstudio/nativescript-cardview Nat