Exploring Ionic Lists

Infinite Lists


由于手机不适合使用多页面显示posts,Infinite Lists成为各种新闻、咨询类app的标配。为了在ionic框架中使用到Infinite
Lists,我们首先学习ion-list。

ion-list


ion-list使用

在ionic中,通过使用ion-list和ion-item来展示数据,通过ng-repeat循环输出,如demo(使用ionic start mydemo
tabs命令生成ionic demo)中的templates/tab-friends.html中显示:

    <ion-list>
<ion-item ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friend/{{friend.id}}">
{{friend.name}}
</ion-item>
</ion-list>

假如我们返回到html的数据,每次都为20项,则但屏幕划到最后一项或前几项时,则需要监听检测到,并且载入下一个20项数据,从而达到无止境的下滑刷新载入更多的目标。这里,ionic提供了ion-infinite-scroll
directive。

ion-infinite-scroll function is more like a scroll detector: it
detects when a user is scrolled to a given point above the bottom of the view
(default 1%, or 99% of the way down), and executes a function.

所以需要在html中添加这个directive,如下:

    <ion-list>
<ion-item ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friend/{{friend.id}}">
{{friend.name}}
</ion-item>
<ion-infinite-scroll on-infinite="addFriends()"></ion-infinite-scroll>
</ion-list>

在controller中添加addFriends()函数,和载入数据。

同时,在重新完全载入数据后,需要发送一个scroll.infiniteScrollComplete事件,告诉directive,我们完成了这个动作,系统会清理scroller和为下一次的载入数据,重新绑定这一事件。

修改friends controller

通过修改controller,让list一次载入20个friends数据,这样达到Infinite
Lists效果,如下修改js/controllers.js中FriendsCtrl:

.controller(‘FriendsCtrl‘, function($scope, Friends) {
var currentStart = 0;
$scope.friends = [];

$scope.addFriends = function() {
for (var i = currentStart; i < currentStart+20; i++) {
$scope.friends.push(Friends.get(currentStart));
}

currentStart += 20;
$scope.$broadcast(‘scroll.infiniteScrollComplete‘);
};

$scope.addFriends();
//$scope.friends = Friends.all();
})


service添加mock数据


在service端,调用Friends factory如下: .factory(‘Friends‘, function() { //
Might use a resource here that returns a JSON array

// Some fake testing data
var friends = [
{ id: 0, name: ‘Scruff McGruff‘ },
{ id: 1, name: ‘G.I. Joe‘ },
{ id: 2, name: ‘Miss Frizzle‘ },
{ id: 3, name: ‘Ash Ketchum‘ },
{ id: 4, name: ‘Scruff McGruff‘ },
{ id: 5, name: ‘G.I. Joe‘ },
{ id: 6, name: ‘Miss Frizzle‘ },
{ id: 7, name: ‘Ash Ketchum‘ },
{ id: 8, name: ‘Scruff McGruff‘ },
{ id: 9, name: ‘G.I. Joe‘ },
{ id: 10, name: ‘Miss Frizzle‘ },
{ id: 11, name: ‘Ash Ketchum‘ },{ id: 0, name: ‘Scruff McGruff‘ },
{ id: 12, name: ‘G.I. Joe‘ },
{ id: 13, name: ‘Miss Frizzle‘ },
{ id: 14, name: ‘Ash Ketchum‘ },
{ id: 15, name: ‘Scruff McGruff‘ },
{ id: 16, name: ‘G.I. Joe‘ },
{ id: 17, name: ‘Miss Frizzle‘ },
{ id: 18, name: ‘Ash Ketchum‘ },
{ id: 19, name: ‘Scruff McGruff‘ },
{ id: 20, name: ‘G.I. Joe‘ },
{ id: 21, name: ‘Miss Frizzle‘ },
{ id: 22, name: ‘Ash Ketchum‘ },
{ id: 23, name: ‘Scruff McGruff‘ },
{ id: 24, name: ‘G.I. Joe‘ },
{ id: 25, name: ‘Miss Frizzle‘ },
{ id: 26, name: ‘Ash Ketchum‘ },
{ id: 27, name: ‘Scruff McGruff‘ },
{ id: 28, name: ‘G.I. Joe‘ },
{ id: 29, name: ‘Miss Frizzle‘ },
{ id: 30, name: ‘Ash Ketchum‘ },
{ id: 31, name: ‘Scruff McGruff‘ },
{ id: 32, name: ‘G.I. Joe‘ },
{ id: 33, name: ‘Miss Frizzle‘ },
{ id: 34, name: ‘Ash Ketchum‘ },
{ id: 35, name: ‘Scruff McGruff‘ },
{ id: 36, name: ‘G.I. Joe‘ },
{ id: 37, name: ‘Miss Frizzle‘ },
{ id: 38, name: ‘Ash Ketchum‘ },
{ id: 39, name: ‘Scruff McGruff‘ }
];

return {
all: function() {
return friends;
},
get: function(friendId) {
// Simple index lookup
return friends[friendId];
}
}


测试


使用python命令,测试:

python -m SimpleHTTPServer 8000

ion-infinite-scroll 参数

<ion-content ng-controller="MyController">
<ion-infinite-scroll
on-infinite="loadMore()"
distance="1%">
</ion-infinite-scroll>
</ion-content>

主要有三个参数:

  1. on-infinite:expression;含义:What to call when the scroller reaches the
    bottom.

  2. distance (optional) string; 含义:The distance from the bottom that the scroll
    must reach to trigger the on-infinite expression. Default: 1%.

  3. icon(optional) string;含义:The icon to show while loading. Default:
    ‘ion-loading-d‘.

也可以添加ng-if来判断是否还有更多数据可以载入,如:

<ion-infinite-scroll
ng-if="moreDataCanBeLoaded()"
icon="ion-loading-c"
on-infinite="loadMoreData()">
</ion-infinite-scroll>

更多的ion-list使用,参照官网

时间: 2024-11-08 05:18:57

Exploring Ionic Lists的相关文章

Ionic实战 自动升级APP(Android版)

Ionic 框架介绍 Ionic是一个基于Angularjs.可以使用HTML5构建混合移动应用的用户界面框架,它自称为是"本地与HTML5的结合".该框架提供了很多基本的移动用户界面范例,例如像列表(lists).标签页栏(tab bars)和触发开关(toggle switches)这样的简单条目.它还提供了更加复杂的可视化布局示例,例如在下面显示内容的滑出式菜单. Ionic 自动升级APP一.准备工作 1.Cordova插件: cordova plugin add https:

Hybrid UI framework shootout: Ionic vs. Famo.us vs. F7 vs. OnsenUI

1 Introduction In the past 2 years I’ve been working intensively on mobile applications, mostly hybrid, and mostly with AngularJS. In my quest to find a good UI framework that integrates with AngularJS, I came across the following options: IonicFrame

ionic listview对象的编辑、排序和删除

1)ionic的listview对象即<ion-list></ion-list> 2)添加并显示编辑按钮(添加其他自定义按钮也一样) can-swipe属性设置为true(默认就是true),在ion-item里添加一个编辑按钮 <ion-list can-swipe="true"> <ion-item ng-repeat="item in lists"> {{item.name}} <ion-option-bu

ionic中&lt;ion-scroll&gt;设置为左右滚动,苹果手机端触摸到此标签上时无法上下滚动内容

ionic中<ion-scroll>设置为左右滚动,苹果手机端触摸到此标签上时无法上下滚动内容. 如下代码: <ion-scroll direction="x" scrollbar-x="false" style="width:100%">  <ul class="brand-scrollList"> <li ng-repeat="lists in bestProjects&

Ionic Js九:列表操作

列表是一个应用广泛在几乎所有移动app中的界面元素.ionList 和 ionItem 这两个指令还支持多种多样的交互模式,比如移除其中的某一项,拖动重新排序,滑动编辑等等. <ion-list> <ion-item ng-repeat="item in items"> Hello, {{item}}! </ion-item> </ion-list> 高级用法: 缩略图,删除按钮,重新排序,滑动 <ion-list ng-contr

WebApp开发框架Ionic+AngularJS+Cordova

目前的手机APP有三类:原生APP.WebAPP.HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Ionic Ionic是一个新的.可以使用HTML5构建混合移动应用的用户界面框架,它自称为是“本地与HTML5的结合”.该框架提供了很多基本的移动用户界面范例,例如像列表(lists).标签页栏(tabbars)和触发开关(toggleswitches)这样的简单条目.它还提供了更加复杂的可视化布局示例,例如在下面显示内容的滑出式菜单. Ionic宣称他们极度强调

ionic 打包安卓包

一.配置环境: 先按照之前的文章,配置好环境需要: 二.安装 1. 这里前提是 需要安装  node (地址: http://nodejs.cn/download/) 命令: node -v   //返回版本号 查看自己是否安装过node,如果没有安装,请访问上面地址 进行安装: 2. 使用npm安装Cordova和 ionic npm install -g ionic cordova 如果长时间没有安装成功,则使用 cnpm 淘宝镜像进行安装: 首先安装 cnpm : npm install

ionic打包apk 的三个环境变量配置

ionic--安装Java jdk并配置环境变量 前言:jdk是 Java 语言的软件开发工具包,它包含了Java 的运行环境,Java 工具和Java 基础的类库.做java web开发,android开发,还有现在流行的混合式App开发,都需要安装jdk oracle官网下载jdk 如下4张图按步骤可以找到jdk的下载路径,也可以点这里去选择你想要的版本 Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png 安装jdk

【No.2 Ionic】超级逗表情 App

本人使用Ionic框架开发了一个 超级逗表情 的App 依赖插件 cordova-plugin-app-version 0.1.9 "AppVersion" cordova-plugin-file 4.3.0 "File" cordova-plugin-file-opener2 2.0.2 "File Opener2" cordova-plugin-file-transfer 1.6.0 "File Transfer" cor