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

【问题标题】：Combining <ons-sliding-menu> and <ons-carousel>结合 <ons-sliding-menu> 和 <ons-carousel>
【发布时间】：2016-02-25 14:11:10
【问题描述】：

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

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

【问题讨论】：

标签： onsen-ui

【解决方案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

希望对你有帮助！

【讨论】：

【解决方案2】：

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

为了注入功能，请在加载 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" />

【讨论】：