ionic上拉下拉效果应用

最新推荐文章于 2022-09-18 00:02:18 发布

兜生

最新推荐文章于 2022-09-18 00:02:18 发布

阅读量4.1k

点赞数

本文链接：https://blog.csdn.net/QQ417431233/article/details/50973232

版权

1、下拉更新数据 : ion-refresher

使用指令 ion-refresher 可以为滚动容器（ ion-scroll 或 ion-content）增加拉动刷新的功能：

ion-refresher 指令有以下可选的属性：
· on-refresh - 当用户向下拉动足够的距离并松开时，执行此表达式
· on-pulling - 当用户开始向下拉动时，执行此表达式
· pulling-text - 当用户向下拉动时，显示此文本
· pulling-icon - 当用户向下拉动时，显示此图标
· refreshing-icon - 当用户向下拉动并松开后，显示的等待图标。 ionic 推荐使用
spinner 代替这个属性
· spinner - 和 refreshing-icon 的作用一样，但 spinner 是基于 SVG 的动画
· disable-pulling-rotation - 禁止下拉图标旋转动画
注意在刷新完毕后，应当使用作用域的$broadcast() 方法通知框架：
$scope.$ broadcast(“scroll.refreshComplete”);

2、上拉更新数据 : ion-infinite-scroll

使用 ion-infinite-scroll 指令可以为滚动容器（ ion-scroll 或 ion-content）增加滚动刷新功能：
…
ion-infinite-scroll 指令有如下属性：
· on-infinite - 必须。当滚动到底部时执行此表达式
· distance - 可选。距底部距离百分比。当距离底部超过此数值时，执行 on-infinite。默认为 1%
· icon - 可选。载入时显示的图标。默认是 ion-load-d。 ionic 推荐使用 spinner代替 icon 属性
· spinner - 可选。载入时的 spinner。默认是 ionSpinner
· immediate-check - 可选。是否在载入时立即检查滚动框范围
注意在刷新完毕后，应当使用作用域的$broadcast() 方法通知框架：
$scope.$ broadcast(“scroll.infiniteScrollComplete”);

<!DOCTYPE html>
<html lang="en" ng-app="firstApp">
<head>
    <meta charset="utf-8">
    <title>ionic css first exercise</title>
    <link href="lib/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head>
    <body ng-controller="firstCtrl">
        <ion-header-bar  class="bar-positive">
            <div class="buttons">
                <button class="button" ng-click="doSomething()">返回</button>
            </div>
            <h1 class="title">练习</h1>
            <div class="buttons">
                <button class="button button-assertive" >菜单</button>
            </div>
        </ion-header-bar>
        <ion-content >
            <ion-refresher on-refresh="load_more();"  pulling-text="放开就刻意刷新"
                           spinner="android" >
            </ion-refresher>
            <h2>spinner 的样式：</h2>
            <p>
                <ion-spinner icon="android" ></ion-spinner>
                <ion-spinner icon="ios"></ion-spinner>
                <ion-spinner icon="ios-small"></ion-spinner>
                <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>
                <ion-spinner icon="circles" class="spinner-energized"></ion-spinner>
            </p>
            <p>
                <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>
                <ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
                <ion-spinner icon="lines" class="spinner-calm"></ion-spinner>
                <ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>
                <ion-spinner icon="spiral"></ion-spinner>
            </p>
            <ul class="list">
                <li class="item"  ng-repeat="item in items">{{item}}</li>
            </ul>
            <ion-infinite-scroll on-infinite="onLoadLess()" distance="10%" immediate-check="true" icon="ion-load-a">

            </ion-infinite-scroll>
        </ion-content>
    </body>
</html>
<script>
    angular.module("firstApp",["ionic"])
            .controller("firstCtrl",["$scope","$ionicScrollDelegate",
                function($scope,$ionicScollDelegate)
            {
                var base=100;
                $scope.items =[];
                $scope.load_more = function()
                {
                        console.log("load_more");
                        for (var i = 0; i < 2; i++, base++)
                        {
                            $scope.items.push(["item ", base].join(""));
                            $scope.$broadcast("scroll.refreshComplete");
                        }
                }

                $scope.onLoadLess=function(){
                    console.log("onLoadLess");
                    for (var i = 0; i < 2; i++, base++)
                    {
                        $scope.items.push(["item ", "liuyonghong"+base].join(""));
                        $scope.$broadcast("scroll.infiniteScrollComplete");
                    }
                }
            }]);
</script>

兜生

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
ionic上拉下拉效果应用

1、下拉更新数据 : ion-refresher使用指令 ion-refresher 可以为滚动容器（ ion-scroll 或 ion-content）增加拉动刷新的功能： ion-refresher 指令有以下可选的属性： · on-refresh - 当用户向下拉动足够的距离并松开时，执行此表达式 · on-pulling - 当用户开始向下拉动时
复制链接

扫一扫