Question

基本上，我想把一个内部。但是，离子滑动滑动是如此敏感，所以我无法滚动内容。它只是滑到下一张幻灯片。

是否可以在？

中的某个区域禁用滑动操作

如图所示，我想禁用B区域的滑动操作。我想（如果可能的话）我需要把一些类放在离子滚动和/或div之下，但是我无法理解它。

这是我的部分HTML代码：

<ion-slide-box on-slide-changed="slideHasChanged($index)">    
  <ion-slide>
  ... // A area content
  <ion-scroll direction="x" ...>
    <div style="width: 5000px; height: 100px" ...>
      // B area. Very wide content
    </div>
  </ion-scroll>
  ... // C area content
 </ion-slide>
</ion-slide-box>

我非常感谢你的帮助。

Answer 1

这是另一种方法：将这些添加到宽元素：

<div on-touch="mouseoverWideDiv()" on-release="mouseleaveWideDiv()">

然后在你的控制器中：

$scope.mouseoverWideDiv = function() {
    $ionicSlideBoxDelegate.enableSlide(false);
};

$scope.mouseleaveWideDiv = function() {
    $ionicSlideBoxDelegate.enableSlide(true);
};

Answer 2

这是另一种方法：在您的控制器中添加一个功能：

$scope.disableSwipe = function() {
   $ionicSlideBoxDelegate.enableSlide(false);
};

在您的视图中，在幻灯片框元素上添加ng-init属性

<ion-slide-box ng-init="disableSwipe()">

这将禁用幻灯片事件。您现在可以使用控制器功能滑动到给定的索引，如下所示：

Answer 3

因为当我使用离子滑片（而不是离子滑动盒）搜索解决方案时，Google将我发送到此处，我将在此处留下我最终使用的解决方案。

首先：离子滑动盒目前已被弃用，因此您现在应该使用离子滑片。

首先在ion-slides元素中设置选项变量：

<ion-slides options="options">

然后在控制器内部，您应该使用noSwiping选项配置options变量，如下所示：

$scope.options = {
            noSwiping: true,
            noSwipingClass: 'do_not_swipe',
        }

然后，在离子幻灯片页面的元素中添加＆＃34; do_not_swipe＆＃34;您要滑动以禁用的元素的类。

以您的代码为例，您应该使用这样的html：

<ion-slides options="options">    
  <ion-slide-page>
  ... // A area content
  <ion-scroll class='do_not_swipe' direction="x" ...>
    <div style="width: 5000px; height: 100px" ...>
      // B area. Very wide content
    </div>
  </ion-scroll>
  ... // C area content
 </ion-slide-page>
</ion-slides>

ionic：我可以在<ion-slide>的某个区域<div>中禁用滑动操作吗？

3 个答案: