在移动设备中滚动时，v-touch无法正常工作

Question

我使用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：使用滑动功能在电脑上滚动效果非常好，这个主题只是在移动设备上进行滚动。

Answer 1

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

Answer 2

1. 将v-touch组件的空兄弟元素添加到其内容中。
2. 将其置于绝对全屏并添加CSS pointer-events: all
3. 添加到其中点击事件监听器并仅在点击时切换隐藏
4. 在基础内容上添加CSS self .queryset .filter(node_id=self.kwargs.get('node_pk')) .order_by('-timestamp')[:1] 并切换显示v-touch。