Question

我有一个<ons-sliding-menu>的应用，一个<ons-toolbar>的页面和一个水平的<ons-carousel>覆盖剩余的空间。
对于<ons-sliding-menu>，参数swipe-target-width="50px"已设置。

有没有办法告诉<ons-carousel>忽略源自最左边50px的事件并让它们进入菜单？

Answer 1

目前没有选项让旋转木马忽略一方的事件，但也许你可以制作一个技巧。您可以将div设置在与旋转木马相同的级别，并让它在您需要的区域中点击而不是旋转木马：

<div class="cover"></div>
<ons-carousel>
    ...
</ons-carousel>

您可以更改这些值以适合您的情况：

.cover {
  position: absolute;
  left: 0;
  height: 100%;
  width: 200px;
  z-index: 1;
}

请在此处查看：http://codepen.io/frankdiox/pen/YqKOJE

希望它有所帮助！

Answer 2

经过一些实验，我找到了解决方案，直接在OnsCarouselElement的拖动事件处理程序中注入必要的功能。为此，我为swipe-ignore-left引入了属性<ons-carousel>。其他站点可以在需要时轻松添加。

为了注入功能，在加载onsenui.js后加载此JS代码：

(function () {

  'use strict';

  /****************************************************************
  Checks the current event against the attribute swipe-ignore-left.
  ****************************************************************/
  window.OnsCarouselElement.prototype._ignoreDrag = function (event) {
    var attr = this.getAttribute('swipe-ignore-left');
    if (attr === undefined) return false;

    var left = parseInt(attr, 10);
    if (left === undefined || left < 1) return false;

    var startX = event.gesture.center.clientX - event.gesture.deltaX;
    return startX < left;
  };

  /****************************************************************
  Save the original drag-event-handlers
  ****************************************************************/
  var originalCarouselOnDrag = window.OnsCarouselElement.prototype._onDrag;
  var originalCarouselOnDragEnd = window.OnsCarouselElement.prototype._onDragEnd;

  /****************************************************************
  Override: OnsCarouselElement.prototype._onDrag
  ****************************************************************/
  window.OnsCarouselElement.prototype._onDrag = function (event) {
    if (this._ignoreDrag(event)) return;
    originalCarouselOnDrag.apply(this, arguments);
  };

  /****************************************************************
  Override: OnsCarouselElement.prototype._onDragEnd
  ****************************************************************/
  window.OnsCarouselElement.prototype._onDragEnd = function (event) {
    if (this._ignoreDrag(event)) return;
    originalCarouselOnDragEnd.apply(this, arguments);
  };

})();

为了保留例如<ons-sliding-menu>的左侧20像素，此HTML将提供：

<ons-sliding-menu ... side="left" swipeable swipe-target-width="20px" />
...
<ons-carousel ... swipeable swipe-ignore-left="20px" />

结合<ons-sliding-menu>和<ons-carousel>

2 个答案: