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

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;
});

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

希望能帮助到你!