当前位置: 首页 > 软件库 > 手机/移动开发 > >

nativescript-pulltorefresh

授权协议 View license
开发语言 JavaScript TypeScript
所属分类 手机/移动开发
软件类型 开源软件
地区 不详
投 递 者 瞿文柏
操作系统 iOS
开源组织
适用人群 未知
 软件概览

NativeScript-PullToRefresh

NativeScript plugin to use Pull to Refresh on any view.


UPDATE

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

Installation

NativeScript 7+:

ns plugin add @nstudio/nativescript-pulltorefresh

NativeScript prior to 7:

tns plugin add @nstudio/nativescript-pulltorefresh@2.0.0

Android - SwipeRefreshLayout

iOS - UIRefreshControl

Sample Screen

Android iOS

Usage

NativeScript Core

XML

<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>

JS

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;

Angular NativeScript

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);
    }

HTML

<PullToRefresh
  (refresh)="refreshList($event)"
  indicatorFillColor="#fff000"
  indicatorColor="#3489db"
>
  <ListView [items]="itemList">
    <template let-item="item">
      <label [text]="item.id"></label>
    </template>
  </ListView>
</PullToRefresh>

NativeScript Vue

import Vue from 'nativescript-vue';

Vue.registerElement(
  'PullToRefresh',
  () => require('@nstudio/nativescript-pulltorefresh').PullToRefresh
);

Component

<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>

Properties

  • refresh : function required
  • refreshing: boolean - Notifies the widget that the refresh state haschanged.
  • indicatorFillColor: Color - the color of the indicator background fill.
  • indicatorColor: Color - the color of the indicator itself.

Changelog

Contributing

 相关资料
  • 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