Question

我有一个使用Onsen UI的简单应用程序，我正在利用轮播并根据用户是向左还是向右滑动到当前轮播元素来更新数据。一旦他们刷过，我想从旋转木马中移除该元素，以便他们无法再次使用它。我试图使用postchange事件似乎工作正常，但当我调用carousel.refresh（）时，轮播不会更新。

旋转木马在html中定义如下：

<ons-carousel var="carousel" swipeable overscrollable auto-scroll fullscreen initial-index="1">
  <ons-carousel-item ng-repeat="foo in bar.baz">
  ....
  </ons-carousel-item>
</ons-carousel>

因为轮播在第一页以外的页面上初始化，所以我添加了一个事件处理程序来监视推送到导航控制器上的新页面，如果它是带有轮播的页面，则初始化轮播的postchange事件的处理程序并更新一些东西。我已经简化了这个例子的情况。

ons.ready(function(){
  mainNavigator.on('postpush', function(event){
    var page = event.enterPage;
      if (page.name == "carousel_page.html"){
        carousel.on('postchange', function(event){
          $scope.bar.baz.splice(event.lastActiveIndex, 1);
          setImmediate(function(){
            // even setting the array to [] here does not make a difference
            carousel.refresh();
          });
        });
      }
    });
  });

逐步完成所有操作我可以验证轮播后面的数组是否正确更新并且carousel变量定义正确，并且刷新（）被调用，但我的轮播永远不会更新。我在这里缺少什么？

我正在使用Angular和Onsen，这是不是因为我添加事件处理程序的方式？它是在$ digest周期之外还是什么？

Answer 1

这里有一个bug列表... ons-carousel是在OnsenUI的最后一个版本中发布的，它只是被测试用于静态数量的元素和一些其他功能，但不是这样的。几周后，所有内容都将在下一个版本中修复。

如果你还想尝试一下，这可以给你一些想法：

$scope.carousel.on('postchange', function(event){
    $scope.$apply(function() {
        $scope.bar.baz.splice(event.lastActiveIndex, 1);
    });
    setImmediate(function(){
        carousel.refresh();
    });
});

它现在应该删除并刷新，但由于某些错误的行为，slideDistance可能是错误的。要解决此问题，您可以考虑使用

$scope.carousel.setActiveCarouselItemIndex($scope.carousel.getActiveCarouselItemIndex());

在carousel.refresh();之后，但这会再次触发'postchange'事件......

为了避免这种'postchange'事件问题，你可以做一些更像角度的事情：

// Let's do something when the ActiveCarouselItemIndex changes
$scope.$watch(function(){return $scope.carousel.getActiveCarouselItemIndex()}, function(newIndex,oldIndex){
    if (newIndex !== oldIndex) {
        $scope.bar.baz.splice(oldIndex, 1);
        setImmediate(function(){
            $scope.carousel.refresh();
            // Avoid the position problem
            $scope.carousel.setActiveCarouselItemIndex($scope.carousel.getActiveCarouselItemIndex());
        });
    }
});
// Still necessary
$scope.carousel.on('postchange', function(event){
    $scope.$apply();
    return;
});

这看起来比前一个更好，但仍然有点儿错误......你可能会找到一种方法来修改它并解决问题，但它可能更容易等待它将照顾的下一个版本动态旋转木马。

希望它有所帮助！

使用Onsen UI从轮播中删除项目

1 个答案: