Ng-repeat 和本机滚动创建范围加载问题

Question

我正在创建混合应用程序，我在 ng-repeat 中遇到本机滚动问题。

下面是我的模板文件代码

<ion-view align-title="center"> 
<ion-content class="ionic headerWithNav" overflow-scroll='true'> 
<ul>
    <li ng-repeat="lessondata in AllLessonComing" ng-class="{true: 'showBg', false: ''}[(AllLessonComing).length>0]" ng-click="lessondetailsPage('{{lessondata.id}}')">
      <div class="lesson-wrap">
        <div class="lesson-img">
          <div class="lession-price"> <span>{{lessondata.price}}</span> </div>
          <div class="lessonImg-wrap"><img image-lazy-src="{{lessondata.image}}" lazy-scroll-resize="true" image-lazy-loader="bubbles" class="ink" on-finish-render="ngRepeatFinished"/></div>
        </div>
        <div class="lessonInfo">
          <div class="row">
            <div class="col col-67">
              <h1>{{lessondata.title}}</h1>
              <div class="lesson-status">{{lessondata.category_name}}</div>
              <div class="row">
                <div class="col lesson-location">{{lessondata.City}}</div>
                <div class="col">
                  <div class="lesson-rating"><img src="img/start-rating.jpg"></div>
                </div>
              </div>
            </div>
            <div class="col padr-none">
              <div class="trainnerImg-wrap">
                <div class="trainee-img"> <img src="{{lessondata.coach_image}}"> </div>
                <div class="trainee-name">{{lessondata.coach_name}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>

     <li ng-show="(AllLessonComing).length == 0">
            <div class="inner-container"><div class="no-results">No Lesson Found</div></div>
     </li>
</ul>
 </ion-content>
 </ion-view>

如您所见，我使用“overflow-scroll='true'”进行本机滚动，使用 ng-repeat 显示我的课程。

这是第一次渲染范围数据时的图像-- when scope data render first time

这是我快速滚动时的图像when i scroll speedily

问题：- 我不知道为什么当我快速滚动时这些图像和文字会重新加载或闪烁

Answer 1

我的代码是正确的。

ng-repeat 导致 ionic 1.0 出现问题。现在 ionic 发布了 ionic 1.2 的新版本，您会看到这个问题已经被 ionic 的开发人员解决了。

您可以轻松更新您的 ionic 版本。

如果您使用的是 NPM，请使用此命令

ionic lib update

检查 www/lib/ionic/ 文件夹中的 brower.JSON 文件。如果 brower.JSON 存在，则删除此文件。

您将看到 ionic 1.2 的 mazik。

Answer 2

此问题发生在混合应用上。列表（和图像）越长，它的滞后就越大。如我所见，您正在使用 Ionic，请尝试改用 ion-list 。它可以帮助创建更好的列表视图。

p/s：抱歉，我无法发表评论（没有足够的代表点）。所以我把它贴在这里。希望对您有所帮助！

另外两个建议：

• 使用angular bindonce 减少$watchers 并加快渲染速度
• 如果您使用适用于 Android 的 ionic build 构建应用，则可以使用 built-in Crosswalk 来获得更强大的应用 web 视图