Angularjs 这在我的android设备上很慢_Angularjs_Ionic Framework_Ionic

Angularjs 这在我的android设备上很慢

angularjs ionic-framework

Angularjs 这在我的android设备上很慢,angularjs,ionic-framework,ionic,Angularjs,Ionic Framework,Ionic,我在我的移动应用程序中有一个滚动列表，我使用ionic 1.0.1构建了它。滚动列表时，列表很不稳定。滚动时文本有点模糊。我在手机上查看了Facebook的应用程序，它可以很好地滚动，没有剪切和模糊。我已经创建了一个代码笔，想知道我是否可以做些什么来提高此代码笔的性能： HTML: <html ng-app="mobileApp"> <head> <meta charset="utf-8"> <meta name="viewport" con

我在我的移动应用程序中有一个滚动列表，我使用ionic 1.0.1构建了它。滚动列表时，列表很不稳定。滚动时文本有点模糊。我在手机上查看了Facebook的应用程序，它可以很好地滚动，没有剪切和模糊。我已经创建了一个代码笔，想知道我是否可以做些什么来提高此代码笔的性能：

HTML:

<html ng-app="mobileApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Ionic List Bug</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>

</head>

<body ng-controller="MainCtrl">

  <ion-content>
    <ion-item collection-repeat="item in items">
      <div class="list card">

        <div class="item item-avatar">
          <img src="mcfly.jpg">
          <h2>{{item}}</h2>
          <p>{{item}}</p>
        </div>

        <div class="item item-body">
          <img class="full-image" src="delorean.jpg">
          <p>
            {{item}}
          </p>
          <p>
            <a href="#" class="subdued">1 Like</a>
            <a href="#" class="subdued">5 Comments</a>
          </p>
        </div>

        <div class="item tabs tabs-secondary tabs-icon-left">
          <a class="tab-item" href="#">
            <i class="icon ion-thumbsup"></i> Like
          </a>
          <a class="tab-item" href="#">
            <i class="icon ion-chatbox"></i> Comment
          </a>
          <a class="tab-item" href="#">
            <i class="icon ion-share"></i> Share
          </a>
        </div>

      </div>
    </ion-item>
  </ion-content>

</body>

</html>

angular.module('mobileApp', ['ionic'])

.config(function($ionicConfigProvider) {
  if (!ionic.Platform.isIOS()) $ionicConfigProvider.scrolling.jsScrolling(false);
})

.controller('MainCtrl', ['$scope', function($scope) {

  $scope.items = [];

  for (i = 0; i < 10; i++) {
    $scope.items.push("Item " + i);
  }
}]);


离子列表错误
{{item}}
{{item}}

{{item}}

JS:

<html ng-app="mobileApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Ionic List Bug</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>

</head>

<body ng-controller="MainCtrl">

  <ion-content>
    <ion-item collection-repeat="item in items">
      <div class="list card">

        <div class="item item-avatar">
          <img src="mcfly.jpg">
          <h2>{{item}}</h2>
          <p>{{item}}</p>
        </div>

        <div class="item item-body">
          <img class="full-image" src="delorean.jpg">
          <p>
            {{item}}
          </p>
          <p>
            <a href="#" class="subdued">1 Like</a>
            <a href="#" class="subdued">5 Comments</a>
          </p>
        </div>

        <div class="item tabs tabs-secondary tabs-icon-left">
          <a class="tab-item" href="#">
            <i class="icon ion-thumbsup"></i> Like
          </a>
          <a class="tab-item" href="#">
            <i class="icon ion-chatbox"></i> Comment
          </a>
          <a class="tab-item" href="#">
            <i class="icon ion-share"></i> Share
          </a>
        </div>

      </div>
    </ion-item>
  </ion-content>

</body>

</html>

angular.module('mobileApp', ['ionic'])

.config(function($ionicConfigProvider) {
  if (!ionic.Platform.isIOS()) $ionicConfigProvider.scrolling.jsScrolling(false);
})

.controller('MainCtrl', ['$scope', function($scope) {

  $scope.items = [];

  for (i = 0; i < 10; i++) {
    $scope.items.push("Item " + i);
  }
}]);

angular.module（'mobileApp'，['ionic']））
.config（函数（$ionicConfigProvider）{
如果（！ionic.Platform.isIOS（））$ionicConfigProvider.scrolling.jsScrolling（false）；
})
.controller（'MainCtrl'，['$scope'，函数（$scope）{
$scope.items=[]；
对于（i=0；i<10；i++）{
$scope.items.push（“Item”+i）；
}
}]);

我们现在可以做的事情不多，但现在您可以将这是您的

.config

，这将允许本机滚动。我确实看到了滚动的性能改进

.config(function($ionicConfigProvider) {
  if(!ionic.Platform.isIOS())$ionicConfigProvider.scrolling.jsScrolling(false);

你有没有试过用我的公司做一个构建？当我们用人行横道引擎进行构建时，android应用程序运行得非常顺利。@JessPatton谢谢你的建议！没有。我刚刚读到这篇文章，它看起来很有希望，我会尝试一下。我仍然需要弄清楚如何使ios的滚动更加平滑。嗯，我从来没有在ios上滚动过任何问题，因为它是最新的网络视图（虽然苹果的核心是邪恶的），但我还没有使用收集重复…你收集了那么多需要重复收集的数据吗？或者你能把它换成一个无限卷轴和一个ng重复吗？大约是50-100张卡。我尝试了ng重复，结果没有显示出任何差异。但我注意到，若我从卡中删除任何一个大DIV部分，性能会显著提高（非常平滑）。为每张卡呈现更多的html可能会导致性能问题？我可能会尝试使用一些html/css技巧来避免对html元素进行如此多的渲染。基本上，可能会尝试修改html以减少代码量，但仍然可以实现类似的布局。您可以尝试在即将到达列表底部的时候加载5到10张卡片，以获取更多数据。我可能弄错了，但我的代码中不已经有了这些吗？您编辑了吗？很抱歉，我肯定回答了2-3个类似的问题。可能搞混了。