在移动设备中滚动时 v-touch 不起作用答案

【问题标题】：v-touch not working when scrollable in mobile在移动设备中滚动时 v-touch 不起作用
【发布时间】：2017-05-03 18:57:58
【问题描述】：

我正在使用 vue-js 2.0 和 vue-touch 在移动设备上实现滑动。

如果我按如下方式初始化我的 div：

<v-touch v-on:swipeleft="nextDay" v-on:swiperight="previousDay" class="page-content" :style="{ height: pageHeight + 'px' }">
  <div style="overflow: auto">

    <div class="block" v-for="(listOfTypes, hours) in blocks">
      <AgendaBlock :list-of-agenda-punten='listOfTypes' :period='hours' :startsFrom7="show7"></AgendaBlock>
    </div>
  </div>

我在移动应用中获得以下 DOM：

如果我在我的内部 div 中评论 overflow:auto，我的滑动功能可以正常工作，但滚动不再有效。如果我取消注释，滚动有效，但滑动无效。

为了避免这个问题，我尝试了很多方法来使用容器 div 进行滚动，但它也没有奏效。怎么了？怎么办？

ps：通过滑动在 PC 上滚动效果很好，本主题只是关于在移动设备上实现滚动。

【问题讨论】：

标签： android html vue.js vuejs2 hammer.js

【解决方案1】：

我猜你想向左/向右滑动并向上/向下滚动。尝试添加 overflow-y: auto 以允许仅在 Y 轴上滚动。

【讨论】：

现在试过了，但是左右滑动还是不行

【解决方案2】：

使 v-touch 组件的内容为空兄弟元素。
绝对全屏并添加 CSS pointer-events: none
添加点击事件监听器并在点击时切换隐藏
在底层内容上添加 CSS pointer-events: all 并切换显示 v-touch on tap。

【讨论】：