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

【问题标题】：ionic: Can I disable the swipe action in a certain area <div> in <ion-slide>?ionic：我可以在 <ion-slide> 中的某个区域 <div> 中禁用滑动操作吗？
【发布时间】：2016-02-10 06:25:15
【问题描述】：

基本上，我想放一个 inside 。但是，离子滑动滑动非常敏感，所以我无法滚动 .它只是滑动到下一张幻灯片。

是否可以在某区域禁用滑动操作？

如图，我想禁用B区的滑动动作。我想（如果可能的话）我需要在 ion-scroll 和/或 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>

非常感谢您的帮助。

【问题讨论】：

好吧，您可以在此链接上找到您的解决方案 -> codepen.io/kmartinezmedia/pen/agKbr
@Lakshya 感谢您的链接。然而，我很困惑。你的意思是不可能吗？链接标题显示“滑动框滚动不起作用”。我可以将 y 轴滚动条放入中，但我无法放入 x 轴滚动条。这是我的问题。
那我就不知道了
@Lakshya 谢谢！有这样的用户界面就好了。让我挖掘更多。再次感谢！

标签： html css ionic-framework

【解决方案1】：

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

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

然后在你的控制器中：

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

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

【讨论】：

等一下，您是要在“B”区域滚动时禁用滑动框，还是要禁用“B”区域本身的滚动？
我想在“B”区域滚动时禁用滑动框。您的解决方案效果很好。我期待有一个简单的 CSS 来禁用滑动，但您的解决方案确实有效。谢谢！

【解决方案2】：

这是另一种方法：在你的控制器中添加一个函数：

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

在您的视图中，在滑动框元素上添加 ng-init 属性

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

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

【讨论】：

谢谢。不过，这是个好主意。你认为我可以禁用某个区域吗？顺便说一句，似乎在“这样的索引：”丢失之后。

【解决方案3】：

由于谷歌在我使用 ion-slides（而不是 ion-slide-box）搜索解决方案时将我发送到这里，所以我将把我最终使用的解决方案留在这里。

首先要注意的是：ion-slide-box 目前已弃用，因此您现在应该使用 ion-slides。

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

<ion-slides options="options">

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

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

然后，在 ion-slide-page 内的元素中，将“do_not_swipe”类添加到要禁用滑动的元素中。

以你的代码为例，你的 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>

【讨论】：