ionic实现上拉到底内容提示

时间:2023-03-08 22:01:14
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);
} }
}