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) ...
随机推荐
- XCode与Git的完美融合,不再依赖其它Git客户端
Git源代码管理工具的出现,使得我们开发人员对于源码的管理更加方便快捷.至于Git的优点以及与其他源代码管理工具有何区别,不是本文的重点,如果想深入了解可以搜索一下这方面的文章.下面直接进入主题,如何 ...
- ROCKETMQ源码分析笔记2:client
CLIENT 之前讲过tools里面有大量调用client的东西.为了从源码层面了解rocket,决定啃下client这块骨头. pom 先看pom,看看CLIENT依赖谁.看完后原来是依赖commo ...
- ADO 读取 ACCESS
#pragma once #include <vector> // 加入ADO支持库, #import "C:\Program Files\Common Files\System ...
- MATLAB地图工具箱学习总结(二)大圆和恒向线
MATLAB地图工具箱学习总结(二)大圆和恒向线 今天要和大家谈一谈大圆.恒向线航道的画法.还是先从案例开始说起,再分别介绍相关的函数. 1 作业案例:地图投影作 ...
- dir、help查询
#!/usr/bin/env python li = [] print(dir(li)) help(list)
- [POJ2420]A Star not a Tree?(模拟退火)
题目链接:http://poj.org/problem?id=2420 求费马点,即到所有其他点总和距离最小的点. 一开始想枚举一个坐标,另一个坐标二分的,但是check的时候还是O(n)的,复杂度相 ...
- Query Designer:Variable 变量
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 【原】命令行方式开启WIFI热点
由于Wifi比较慢,可以使用笔记本(带无线网卡的电脑也可以) 开启无线网络,供手机使用.方法如下: netsh wlan set hostednetwork mode=allow ssid=qa ...
- DuiLib 源码分析之解析xml类CMarkup & CMarkupNode cpp文件
时隔5个月才有时间接着写未完成的实现部分,也是惭愧呀 选几个关机的函数来解析,一些get方法就忽略掉吧 CMarkupNode 与 CMarkUp 互为友元类,CMarkUp 实现解析,CMarkup ...
- 流媒体测试笔记记录之————阿里云监控、OBS、FFmpeg拉流和推流变化比较记录
OBS设置视频(512kbps)和音频(128kbps)比特率 阿里云监控结果: 使用FFmpeg拉流到Nginx 服务器测试比特率 第二次测试,修改视频和音频比特率 OBS设置 阿里云监控 Ngin ...