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);
        }

    }
}
时间: 2024-10-29 10:46:44

ionic实现上拉到底内容提示的相关文章

上拉加载底部转圈圈动画并文字提示

<block> <view class="listFooterLoading" wx:if="{{loadStatus==1}}"> <!-- 转圈圈 --> <view class="m-load2"> <view class="line"><view></view><view></view><view>&

ionic上拉加载更多当数据加载完没有下一页的时候我们需要显示一下&quot;没有更多了&quot;的友好提示

ionic上拉加载更多当数据加载完没有下一页的时候我们需要显示一下"没有更多了"的友好提示,但是在ionic里面遇到了一个问题.就是没有数据的时候我显示了没有更多的时候我的点击商品详情的事件失效了.怎么点都不触发 这到底怎么回事.简直是....遇到了各种奇葩问题.好了先不吐槽了.还是先解决问题吧. 我们看代码的时候很容易从因为这句话而出发.最开始的时候我是上拉第一页的时候.点击事件还有效.也就是上拉到最后一页点击事件才会失效.也就是isNext为false的时候.这时候我就会以为是ng

ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新

发了十篇教程,现在向我问问题的朋友越来越少了.可能我接触到的学习ionic的就这么些人吧! 可能大家已经觉得我写的东西都太过基础了,没什么值得参考借鉴的地方. 开始有人叫我说直接防类似饿了吗,折八百这样的网站,做一个Demo. 其实我也知道有些朋友就想要这种网上的免费劳动力. 但是其实这个建议还是不错的. 等我把现在这个demo讲完,我可能会考虑找一个成熟的上线的项目进行说明. 这个列表页一说,写完这个的朋友就可以尝试着接手项目了. 我不是说ionic简单,内容少. 我只是说我这些时间里面提到的

160823、ionic上拉/下拉更新数据

<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"

ionic-Javascript:ionic 上拉菜单(ActionSheet)

ylbtech-ionic-Javascript:ionic 上拉菜单(ActionSheet) 1.返回顶部 1. ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项. 非常危险的选项会以高亮的红色来让人第一时间识别.你可以通过点击取消按钮或者点击空白的地方来让它消失. 实例 HTML 代码 <body ng-app="starter" ng-controller="actionsheetCtl&quo

ionic 的下拉刷新 与 上拉加载

<ion-view view-title="消息通知"> <ion-content class="padding"> <!-- <ion-refresher> 下拉刷新指令 --> <ion-refresher pulling-text="Pull to refresh" on-refresh="vm.doRefresh()"></ion-refresher&g

ionic 上拉加载问题(分页)

问题描述: 1.第一初始化时执行了上拉加载更多. 2.上拉时存在执行多次加载动作. angularjs的ajax不提供同步机制,是为了防止页面长时间等待,很多时候我们又需要这种同步机制交换状态,比如上拉加载更多,很多时候不允许同时执行多次加载更多,所以有了这篇文章. 首先上代码 .controller('project', function($scope, $stateParams, $http,$state,$ionicPopup) { $scope.hasmore=true; var run

ionic 下拉刷新,上拉加载更多

1)下拉刷新用的是 ion-refresher,使用示例如下: <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()"> </ion-refresher> 详情说明请看官方文档:http://ionicframework.com/docs/api/directive/ionRefresher/ 刷新后需要收起 loading 动画 $scope.$br

MUI实现上拉刷新和下拉加载

  前  言 ha ha 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况): mui通过双webview解决这个DIV的拖动流畅度问题:拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画. mui的上拉加载和下拉刷新类似,都属于pullRefresh插件. 上拉刷新 主页面内容比较简单,只需要创建子页面即可: mui.init({ subpages:[{ u