ionic实现上拉到底内容提示
<!--html代码-->
<ion-content has-bouncing = true on-drag-up="scrollDragUp()">
<div class="content">
<list-item></list-item>
</div>
<ion-infinite-scroll on-infinite="onInfinite()" ng-if="!noMoreItems" distance="1%"><i>正在加载数据</i></ion-infinite-scroll>
</ion-content>
//js代码
var isShowNomore = false;
$scope.scrollDragUp = function() {
var currentTop = ionicScrollDelegate.getScrollPosition().top;
var maxTop = ionicScrollDelegate.getMaxTop();
if (currentTop - maxTop > 50 && maxTop > 0) {
//说明可以提示了
if (!isShowNomore && scope.noMoreItemsAvailable) {
isShowNomore = true;
scope.infiniteData = "已经到底啦!";
$(".infinite-data").show();
setTimeout(function() {
$(".infinite-data").hide();
isShowNomore = false;
}, 700);
} }
}
ionic实现上拉到底内容提示的更多相关文章
- ionic上拉加载组件 ion-infinite-scroll自动调用多次的问题
参考文章地址:http://www.cnblogs.com/luleixia/p/6402418.html ionic 一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面 ...
- ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项
首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...
- 【转载】 ionic 的 下拉刷新 与 上拉加载
这篇文章是讲解 Ioinc中怎么实现 下拉刷新和上拉加载的.也是我们日常做项目是必不可少的功能.有兴趣的小伙伴可以来学习一下. 更多关于 IONIC 的资源: http://www.aliyue.ne ...
- ionic上拉加载更多解决方法
第一步: $scope.hasmore = true;//是否允许上拉加载 $scope.num = 8;//显示条数 第二步://查询显示内容,查出所有的 $scope.Group = functi ...
- Ionic Js一:上拉菜单(ActionSheet)
上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项. 非常危险的选项会以高亮的红色来让人第一时间识别.你可以通过点击取消按钮或者点击空白的地方来让它消失. HTML 代码 <b ...
- 160823、ionic上拉/下拉更新数据
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF- ...
- 解决ionic 上拉加载组件 ion-infinite-scroll自动调用多次的问题或禁止第一次加载
ionic 中一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面高度,会自动检测并无限调用多次加载更多的函数: 当然,主要会导致首次调用的时候,会执行几次加载更多的函数: ...
- 解决ionic 上拉加载组件 ion-infinite-scroll自动调用多次的问题
ionic 中一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面高度,会自动检测并无限调用多次加载更多的函数:当然,主要会导致首次调用的时候,会执行几次加载更多的函数: ...
- ionic-Javascript:ionic 上拉菜单(ActionSheet)
ylbtech-ionic-Javascript:ionic 上拉菜单(ActionSheet) 1.返回顶部 1. ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet) ...
随机推荐
- 2017年1月1日 星期日 --出埃及记 Exodus 21:27
2017年1月1日 星期日 --出埃及记 Exodus 21:27 And if he knocks out the tooth of a manservant or maidservant, he ...
- 复旦大学2015--2016学年第一学期(15级)高等代数I期末考试第八大题解答
八.(本题10分) 设 $V$ 为数域 $K$ 上的 $n$ 维线性空间, $\varphi$ 为 $V$ 上的线性变换. 子空间 $C(\varphi,\alpha)=L(\alpha,\varp ...
- Spark在Hadoop集群上的配置(spark-1.1.0-bin-hadoop2.4)
运行Spark服务,需要在每个节点上部署Spark. 可以先从主节点上将配置修改好,然后把Spark直接scp到其他目录. 关键配置 修改conf/spark-env.sh文件: export JAV ...
- 一步一步安装UEFI分区方式的windows 10 企业版
发现很多坛友不会安装UEFI分区的windows 10 从启动设置,到分区,到最后的引导与激活都是很大的问题. 在我看来这是最不容易出错的安装方式适合于刚刚上手的菜鸟,自己按照图片一步一步的就可以安装 ...
- 关于DSP的boot mode / boot loader /上电顺序 /在线升级等问题的总结
使用器件 ti dsp c2000 2837x 1.dsp的上电过程和boot mode以及boot loader 1)dsp的上电顺序, 对于双核系统而言 , 他的上电启动顺序如下所示: 系统复位或 ...
- 相机位姿估计0:基本原理之如何解PNP问题
关键词:相机位姿估计 PNP问题求解 用途:各种位姿估计 文章类型:原理 @Author:VShawn(singlex@foxmail.com) @Date:2016-11-18 @Lab: CvLa ...
- js类型检测
1.typeof 或者 typeof() 适合基本类型及function检测,遇null失效 ex: typeof 100 返回值为 "number" typeof ...
- 使用airbnb的eslint
1. 全局安装eslint npm install -g eslint npm install -g eslint-config-airbnb eslint-plugin-import eslint- ...
- python成长之路【第十五篇】:JavaScript初步认识
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...
- Linux 的 strace 命令
https://linux.cn/article-3935-1.html http://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316692.htm ...