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) ...
随机推荐
- er3
<html xmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:of ...
- Python Locust对指定网站“一键压测”
[本文出自天外归云的博客园] 前篇 前篇:Python Locust性能测试框架实践 本篇 承上——归纳过程 在前篇的基础上,我们可以利用Locust性能测试框架编写python脚本对指定网站或者接口 ...
- [LeetCode_5] Longest Palindromic Substring
LeetCode: 5. Longest Palindromic Substring class Solution { public: //动态规划算法 string longestPalindrom ...
- 高效 JavaScript
高效 JavaScript 原译文地址 http://kb.operachina.com/node/207 传统上,网页中不会有大量的脚本,至少脚本很少会影响网页的性能.但随着网页越来越像 Web 应 ...
- 今天谈谈流,什么是IO流?
无标题 (5) :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { bord ...
- PHP网页
1.安装YUM源 2.安装httpd与PHP yum install httpd -y yum install php -y 3.进入htmi文件中 cd /var/www/html/ 4.将自己编写 ...
- iOS10通知框架UserNotification理解与应用
iOS10通知框架UserNotification理解与应用 一.引言 关于通知,无论与远程Push还是本地通知,以往的iOS系统暴漏给开发者的接口都是十分有限的,开发者只能对标题和内容进行简单的定义 ...
- rgb转16进制 简单实现
function rgbToHex(r, g, b) { return ((r << 16) | (g << 8) | b).toString(16); }
- 关于json-p
关于json-p 目录 关于json-p json-p是什么 json-p原理分析 json-p的缺点 json-p是什么 json-p实际上是一种跨域ajax发送http请求的方法,它不是什么全新的 ...
- understanding ECMAscript 6 ---- block bindings
Traditionally, the way variable declarations work has been one tricky part of programming in javascr ...