启动时禁用离子滑动

disable ion-slide at startup

本文关键字:启动      更新时间:2023-09-26

是否可以在启动时禁用幻灯片功能,同时我仍然能够设置自己的活动页面?

在HTML

中,我发现这是可行的
<ion-slide-box active-page="disableSlide()">
    <ion-slide>Slide 1</ion-slide>
    <ion-slide ng-click="previous()">Slide 2</ion-slide>
    <ion-slide>Slide 3</ion-slide>
</ion-slide-box>

在JavaScript中,

$scope.disableSlide = function(){
    $ionicSlideBoxDelegate.enableSlide(false);
    return 1;
}
$scope.previous = function(){
    $ionicSlideBoxDelegate.previous();
}

但是当我点击previous时,我得到了这个错误

Error: [$compile:nonassign] Expression 'disableSlide()' used with directive 'ionSlideBox' is non-assignable!

这里的Demo, http://codepen.io/anon/pen/Bodqor

请帮帮我,谢谢。

<ion-slide-box>没有active-page属性,您可以在文档中看到。

你得到这个错误是因为你已经禁用了滑动条:

$ionicSlideBoxDelegate.enableSlide(false);

但是你仍然想用ng-click来改变幻灯片。

如果你想在显示视图时禁用滑块,你可以使用$ionicSlideBoxDelegate.enableSlide(false);,但你最好把它包装在一个函数中:

function changeSlideStatus()
{
    $scope.slideEnabled = !$scope.slideEnabled;
    $scope.slideStatusTest = $scope.slideEnabled ? "Enabled" : "Disabled";
    $ionicSlideBoxDelegate.enableSlide($scope.slideEnabled); 
}

$scope.slideEnabled是一个布尔属性,用来定义状态

当导航进入你的视图时,你可以改变状态:

$scope.$on('$ionicView.enter', function(){
    changeSlideStatus();
});

你可以玩这个Plunker。在标题中,你可以禁用/启用滑块,只需调用changeSlideStatus();:

<ion-nav-buttons side="left">
  <button class="button button-positive"
          ng-click="changeStatus()">
    {{slideStatusTest}}
  </button>
</ion-nav-buttons>

PS: It started disabled.