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) ...
随机推荐
- Java的日期工具类
package com.tech.jin.util; import java.text.DateFormat; import java.text.ParseException; import java ...
- Sqoop1.4.6配置和使用
http://jingpin.jikexueyuan.com/article/39333.html http://sqoop.apache.org/docs/1.4.6/SqoopUserGuide. ...
- Creating Dialogs
#ifndef DIALOG_H #define DIALOG_H #include <QtWidgets> //#include <QDialog> //#include & ...
- xml 方式更新和获取 配置文件 appSettings 节点 解决办法
最近在搞一个小程序,会用到动态修改配置文件来进行处理,在百度上找了很多办法,但是始终达不到我预想的效果,先列出程序运行环境和开发工具版本: 开发工具:VS2010 .Net 运行环境:4.0 有两种方 ...
- unreal slate 创建 window
testWindow = SNew(SWindow) .Title(LOCTEXT("Asset Window", "Asset Window")) .Clie ...
- C++备忘录
参考资料: 1. <C++编程思想(第一卷)> 知识点: ● register变量:它是一种局部变量类型.它告诉编译器尽快访问该变量.一般会把变量放在寄存器中,但不保证一定会.不能得到或计 ...
- Microsoft Web Platform Installer 5.0
Microsoft Web Platform Installer 5.0 Web 平台安装器 https://www.microsoft.com/web/downloads/platform.aspx
- 让PHP开发者事半功倍的十大技巧
如果你使用一面大镜子作为冲浪板会发生什么?或许你会在较短的时间内征服海浪,但是你肯定从内心深处明白,这不是冲浪的正确选择.同样的道理也适用于PHP编程,尽管这样的类比听起来有一些古怪.我们经常听到有人 ...
- Nginx基础知识之————RTMP模块专题(实践文档)
on_publish 语法:on_publish url上下文:rtmp, server, application描述:这个可以设置为一个API接口(GET方式接受所有参数),会给这个API接口返回8 ...
- 关于content-type","application/x-www-form-urlencoded;charset=utf-8"的说明
在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlen ...