Question

我的离子应用程序上有一个日历元素。当用户向左或向右滑动时，它会转到另一个月。一个问题/挑战是，当我向右滑动时，侧栏显示。

我确实使用了drag-content="false"并禁用了滑动菜单功能，但我只想在该日历元素上使用它。

我找到了this Stackoverflow帖子的答案，但我不明白它是如何工作的，因为我无法找到内容元素之间的任何差异。在该帖子中，他们还包含了答案CODEPEN

的codepen链接

Answer 1

也许您可以将drag-content指令绑定到范围变量（布尔值），然后在鼠标位于日历组件上时更改其值：

<ion-side-menu-content drag-content="drag">

因此，请在日历上注册mouseover / mouseleave事件的监听器：

<flex-calendar on-touch="mouseoverCalendar()" on-release="mouseleaveCalendar()" drag-content="toggledrag" options="options" events="events"></flex-calendar>

并插入您的控制器：

  $scope.drag = true;

  $scope.mouseoverCalendar = function() {
    $scope.drag = false;
  };

  $scope.mouseleaveCalendar = function() {
    $scope.drag = true;
  };

以下是使用Flex Calendar：http://codepen.io/beaver71/pen/bEmaJZ

的示例

Answer 2

将其放入日历视图的控制器中，当您输入日历时它将显示在菜单中，并在您离开视图时重新启用它：

$scope.$on('$ionicView.enter', function(){
    $ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.leave', function(){
    $ionicSideMenuDelegate.canDragContent(true);
});

来自this post

的回答

不要在拖曳离子上显示侧面菜单

2 个答案: