如何在滚动离子滚动时添加离子列表项

时间:2016-09-21 08:37:47

标签: angularjs ionic-framework

我创建了具有特定集合的离子列表,并使用离子滚动为此列表项创建了滚动条。我想在滚动滚动条时动态添加一些列表项。我使用了下面的代码。

<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Scroll X and Y</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body ng-controller="MainCtrl">
<ion-view title="Home" hide-nav-bar="true">
    <ion-scroll zooming="true" direction="xy" on-scroll="scroll()" style="width: 100%; height: 100%">
        <ion-list style="width: 100%">
            <ion-item ng-repeat="item in items">
                {{item}}
            </ion-item>
        </ion-list>
    </ion-scroll>
</ion-view>
<script>
    var myApp = angular.module('ionicApp', ['ionic']);
    myApp.controller('MainCtrl', function ($scope) {
        $scope.items = [];
        for (var i = 0; i < 100; i++) {
            //var 
            $scope.items.push(i);
        }
        var n = 100;
        $scope.scroll = function ()
        {
             for (var j = 0; j < 5; j++) {
                $scope.items.push(n);
                n++;
            }
            $scope.$apply();
        }
    });
</script>

我已尝试过上面的代码,但滚动并不顺畅。所以请建议任何其他方式来附加列表项。

0 个答案:

没有答案