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

Question

我有一个应用程序 <ons-sliding-menu> 和一个页面 <ons-toolbar> 和一个水平
<ons-carousel> 覆盖剩余的 space.
对于 <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 的拖动事件处理程序中注入必要功能的解决方案。为此，我为 <ons-carousel> 引入了属性 swipe-ignore-left。其他站点可以在需要时轻松添加。

为了注入功能，请在加载后加载此 JS 代码 onsenui.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>

Combining <ons-sliding-menu> and <ons-carousel>

onsen-ui