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正在创造离子1.0的问题。现在离子发布了离子1.2的新版本，您将看到此问题已由离子开发人员解决。

您可以轻松更新离子版本。

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

ionic lib update

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

你会看到离子1.2的mazik。

Answer 2

此问题发生在混合应用上。较长的列表（和图像）越长。我可以看到你正在使用Ionic，试着改用ion-list。它可以帮助创建更好的列表视图。

p / s：抱歉，我无法发表评论（没有得到代表点）。所以我在这里发布。希望它有所帮助！

另外两个建议：

使用angular bindonce减少$ watchers并加快渲染速度
如果您使用适用于Android的离子版本构建应用，则可以使用built-in Crosswalk获得更强大的应用网页浏览功能

Ng-repeat和Native滚动创建了范围加载问题

2 个答案: