Question

我们在 VueJs 中有一个应用程序，在主页上一切正常。当我们在移动设备上加载页面时，滚动几乎没有问题，如果我们触摸图表并尝试向下滚动页面，则触摸就像从图表中截获一样，使滚动变得不可能。因此，为了滚动页面，我们必须从图表外部开始滚动。

我尝试在图表选项中添加以下 events: ['mousemove', 'mouseout', 'click',], 认为这样会排除触摸选项，但效果不佳。

我也尝试了以下但没有成功。

tooltips: {
    enabled: false
},
 events: [],

有什么建议吗？非常感谢。

Answer 1

几个小时后，我找到了解决方案。似乎在图表的画布中有一个 css 属性 touch-action: none; 将其设置为 touch-action: unset 解决了我的问题。

<template>
  <canvas class="chart-mobile" ref="canvas"/>
</template>

<style scoped>
  .chart-mobile {
    touch-action: unset !important;
  }
</style>

移动设备上的 CharJs 滚动页面

1 个答案: