当ons惰性重复检测到更改时，如何使用ons旋转木马刷新列表

How to refresh a list with an ons-carousel when ons-lazy-repeat detects a change

本文关键字：ons 何使用 旋转木马 列表 刷新 检测      更新时间：2023-09-26

我有一个ons列表，该ons列表项具有ons惰性重复委托。每个ons列表项还有一个带有两个索引（0和1）的ons carousel元素。

如果我使用for循环来拼接绑定到ons惰性重复委托的数组，则列表将被更改为删除从数组中删除的项目，但ons转盘索引保持相同

示例：

<ons-list>
   <ons-list-item id="myList" modifier="chevron" class="item" ons-lazy-repeat="myDelegate">
      <ons-carousel swipeable auto-refresh style="height: 72px; width: 100%;" initial-index="0" auto-scroll>
         <ons-carousel-item class="list-action-item" ng-click="doThis()">
           Some random text
         </ons-carousel-item>
         <ons-carousel-item class="list-action-menu" ng-click="delete(elementId)">
           Remove all items like this one
         </ons-carousel-item>
      </ons-carousel>                 
   </ons-list-item>
</ons-list>

delete函数是一个javascript for循环，它将遍历与myDelegate关联的数组，并删除与elementId 不匹配的项

示例：

for (var i = $scope.myArray.length - 1; i >= 0; i--) {
        var currenElement = $scope.myArray[i];
        if(currenElement.elementId === elementId){
            $scope.myArray.splice(i,1);
        }
};

这一点非常好，会更新，并且项目会从列表中直观地删除。

然而，对于数组的元素i，ons转盘索引保持为1，这意味着如果元素i被移除，则列表中变为元素i的元素i+1将把索引更改为1。

有关示例，请访问http://codepen.io/anon/pen/XJOgoa尝试向左拖动任何元素并按delete键：您将看到元素被删除，但元素i+i现在显示删除（旋转木马索引="1"而不是0）

感谢您的帮助。

在删除元素之前，视图已用prev({animation: 'none'})修复：

$scope.remove = function(index) {
  $scope.carousel[index].prev({animation: 'none'});
  $scope.myArray.splice(index, 1);
};

在你的Codepen中，删除功能会被触发两次。这是一个错误，但在最新版本的Onsen UI中已经修复。在此工作：http://codepen.io/frankdiox/pen/ByMmwE

编辑：在Github上创建了一个关于此的问题。

相关文章：