ionic ion-refresher 下拉刷新的使用。

ion-refreasher 实例代码如下：

<ion-content ng-controller="MyController"><ion-refresherpulling-text="下拉刷新..."on-refresh="doRefresh()"></ion-refresher><ion-list><ion-item ng-repeat="item in items"></ion-item></ion-list>
</ion-content>

Controller

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $http) {$scope.items = [1,2,3];$scope.doRefresh = function() {$http.get('/new-items').success(function(newItems) {$scope.items = newItems;}).finally(function() {// 停止广播ion-refresher$scope.$broadcast('scroll.refreshComplete');});};
});

on-refresher指令有以下可选的属性：

on-refresh - 当用户向下拉动足够的距离并松开时，执行此表达式
on-pulling - 当用户开始向下拉动时，执行此表达式
pulling-text - 当用户向下拉动时，显示此文本
pulling-icon - 当用户向下拉动时，显示此图标
refreshing-icon - 当用户向下拉动并松开后，显示的等待图标。ionic推荐使用spinner 代替这个属性
spinner - 和refreshing-icon的作用一样，但spinner是基于SVG的动画
disable-pulling-rotation - 禁止下拉图标旋转动画

spinner动画有。

<ion-content scroll="false" class="has-header"><p><ion-spinner icon="android"></ion-spinner><ion-spinner icon="ios"></ion-spinner><ion-spinner icon="ios-small"></ion-spinner><ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner><ion-spinner icon="circles" class="spinner-energized"></ion-spinner></p><p><ion-spinner icon="crescent" class="spinner-royal"></ion-spinner><ion-spinner icon="dots" class="spinner-dark"></ion-spinner><ion-spinner icon="lines" class="spinner-calm"></ion-spinner><ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner><ion-spinner icon="spiral"></ion-spinner></p></ion-content>

ionic ion-refresher 下拉刷新的使用。相关推荐

ionic上拉加载-下拉刷新
ionic上拉加载-下拉刷新 1.上拉加载 <ion-infinite-scroll on-infinite="loadOlderStories()" distance=&q ...
微信小程序下拉刷新、上拉加载
微信小程序官方没有给出具体的下拉刷新和上拉加载组件,我们可以基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载.下拉刷新组件. 1. 封装组件 // components/cus ...
小程序：区域滚动、下拉刷新、上拉加载更多
一.简介开发环境:小程序.uniapp 实现功能:列表页面实现,区域滚动.下拉刷新.上拉加载更多,效果如图: 正常: 下拉刷新: 上拉加载: 二.实现 2.1.代码 <scroll-view ...
scroll-view的下拉刷新和上拉加载（触底）
文章目录前情提要组件:scroll-view 小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/in ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...
android google 下拉刷新 csdn,android SwipeRefreshLayout google官方下拉刷新控件
下拉刷新功能之前一直使用的是XlistView很方便我前面的博客有介绍 SwipeRefreshLayout是google官方推出的下拉刷新控件使用方法也比较简单今天就来使用下SwipeRefres ...
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据，下拉刷新当前列表数据（等同于翻页功能）
<template><div class="sg-page-body"><div class="sg-list"><v ...
微信小程序下拉刷新和上拉加载的实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一: 下拉刷新下拉刷新两个步骤就能实现. 1.在要实现下拉刷新的页面的json配置文件里面加上 &q ...
微信小程序订单页面下拉刷新上拉分页加载
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 效果图: 代码: json代码: {"enablePullDownRefresh" ...
20-flutter下拉刷新与上拉加载
1 RefreshIndicator 下拉刷新控件下拉刷新的时候会回调 onRefresh 方法 RefreshIndicator(onRefresh: _handleRefresh,child: ...

ionic ion-refresher 下拉刷新的使用。

ionic ion-refresher 下拉刷新的使用。相关推荐

最新文章

热门文章