ionic上拉翻页及下拉刷新
16lz
2021-01-26
测试用的Reddit API:
代码一:www/index.html
http://ionicframework.com/docs/api/directive/ionRefresher/
只需要在列表页的最前面加上
https://www.reddit.com/dev/api
默认显示20多条记录:
www.reddit.com/r/Android/new/.json
取某个item前面的记录
www.reddit.com/r/Android/new/.json?before=ITEM_NAME_HERE
=>ITEM_NAME_HERE可以看做是reddit中item的标识符(由kind + _ + id组成),可以从返回的json数据中取到,比如t3_3r5w9j
上拉翻页:
http://ionicframework.com/docs/api/directive/ionInfiniteScroll/
只需要在list的后面加上:
<ion-infinite-scroll on-infinite="loadOlderStories()" distance="1%"> </ion-infinite-scroll>并在loadOlderStories处理结束后调用$scope.broadcast('scroll.ifiniteScrollComplete')。
代码一:www/index.html
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="lib/moment/moment.js"></script> <script src="lib/angular-moment/angular-moment.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script></head><body ng-app="myreddit" ng-controller="RedditCtrl"><ion-pane> <ion-header-bar class="bar-positive"> <h1 class="title">My Reddit</h1> </ion-header-bar> <ion-content> <div class="list"> <a href="{{story.url}}" target="_blank" class="item item-thumbnail-left item-text-wrap" ng-repeat="story in stories track by story.id"> <img ng-src="{{story.thumbnail}}" ng-if="story.thumbnail.startsWith('http')"/> <h2>{{story.title}}</h2> <p> <span am-time-ago="story.created_utc" am-preprocess="unix"></span> - {{story.domain}} </p> </a> </div> <ion-infinite-scroll on-infinite="loadOlderStories()" distance="1%"> </ion-infinite-scroll> </ion-content></ion-pane></body></html>
代码二:www/js/app.js
// Ionic Starter App// angular.module is a global place for creating, registering and retrieving Angular modules// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)// the 2nd parameter is an array of 'requires'(function () { var app = angular.module('myreddit', ['ionic', 'angularMoment']); app.controller('RedditCtrl', function ($http, $scope) { $scope.stories = []; $scope.loadOlderStories = function(){ var params = {}; if($scope.stories.length > 0){ params['after'] = $scope.stories[$scope.stories.length -1].name; } $http.get('https://www.reddit.com/r/Android/.json', {params: params}) .success(function (response) { angular.forEach(response.data.children, function (child) { $scope.stories.push(child.data); }); $scope.$broadcast('scroll.infiniteScrollComplete'); }); } }); app.run(function ($ionicPlatform) { $ionicPlatform.ready(function () { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if (window.StatusBar) { StatusBar.styleDefault(); } }); })})();下拉刷新:
http://ionicframework.com/docs/api/directive/ionRefresher/
只需要在列表页的最前面加上
<ion-refresher pulling-text="Pull to refresh..." on-refresh="loadNewerStories()"> </ion-refresher>并在loadNewerStories处理结束后调用$scope.broadcast('scroll.refreshComplete') 。
文件一:www/index.html
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="lib/moment/moment.js"></script> <script src="lib/angular-moment/angular-moment.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script></head><body ng-app="myreddit" ng-controller="RedditCtrl"><ion-pane> <ion-header-bar class="bar-positive"> <h1 class="title">My Reddit</h1> </ion-header-bar> <ion-content> <ion-refresher pulling-text="Pull to refresh..." on-refresh="loadNewerStories()"> </ion-refresher> <div class="list"> <a href="{{story.url}}" target="_blank" class="item item-thumbnail-left item-text-wrap" ng-repeat="story in stories track by story.id"> <img ng-src="{{story.thumbnail}}" ng-if="story.thumbnail.startsWith('http')"/> <h2>{{story.title}}</h2> <p> <span am-time-ago="story.created_utc" am-preprocess="unix"></span> - {{story.domain}} </p> </a> </div> <ion-infinite-scroll on-infinite="loadOlderStories()" distance="1%"> </ion-infinite-scroll> </ion-content></ion-pane></body></html>
文件二:www/js/app.js
// Ionic Starter App// angular.module is a global place for creating, registering and retrieving Angular modules// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)// the 2nd parameter is an array of 'requires'(function () { var app = angular.module('myreddit', ['ionic', 'angularMoment']); app.controller('RedditCtrl', function ($http, $scope) { $scope.stories = []; function loadStories(params, callback) { var stories = []; $http.get('https://www.reddit.com/r/funny/.json', {params: params}) .success(function (response) { angular.forEach(response.data.children, function (child) { stories.push(child.data); }); callback(stories); }); } $scope.loadOlderStories = function () { var params = {}; if ($scope.stories.length > 0) { params['after'] = $scope.stories[$scope.stories.length - 1].name; } loadStories(params, function (olderStories) { $scope.stories = $scope.stories.concat(olderStories); $scope.$broadcast('scroll.infiniteScrollComplete'); }); } $scope.loadNewerStories = function () { var params = {}; params['before'] = $scope.stories[0].name; loadStories(params, function (newerStories) { $scope.stories = newerStories.concat($scope.stories); $scope.$broadcast('scroll.refreshComplete'); }); } }); app.run(function ($ionicPlatform) { $ionicPlatform.ready(function () { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if (window.StatusBar) { StatusBar.styleDefault(); } }); })})();
更多相关文章
- android studio 官方用户指南翻译学习(四)创建 Android(安卓)libra
- Android(安卓)SD卡操作 (Environment 状态)
- TensorFlow in Android
- 安卓 Android之开发简单小应用(三)
- 第14章 使用Kotlin 进行 Android(安卓)开发(1)
- SharedPreferences存储
- Android之官方导航栏之Toolbar(Toolbar+DrawerLayout+ViewPager+
- android 通过platform.pk8,platform.x509.pem生成jks签名文件
- DialogFragment与Activity通信最佳实践