收藏
回答

小程序在使用echarts后滑动到echarts部分后就无法滑动了?

小程序在使用echarts后滑动到echarts部分后就无法滑动了,是什么引起的,有哪位大佬知道怎么解决吗?

回答关注问题邀请回答
收藏

3 个回答

  • For the future
    For the future
    2020-05-08

    ec-canvas里面有对touch事件的处理,如果你的图表不需要滑动,可以去ec-canvas.wxml中删掉touch相关的事件绑定

    <canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
    

    或者在图表上加一个透明蒙层。

    如果你的图表有设置了dataZoom需要滑动,需要在ec-canvas.js里面的touchStart和touchMove方法加一句 var touch = getTouch(e.touches) ,因为手指触摸时e.touches不止一个点,需要自定义getTouch方法获取准确的点

    function getTouch(touches){
      let touch ;
      for (let i = 0; i < touches.length; ++i) {
        touch = touches[i];
        if(touch.x && touch.y){
          touch.offsetX = touch.x;
          touch.offsetY = touch.y;
          break
        }
      }
      return touch;
    }
    
    2020-05-08
    有用 1
    回复 8
    • 段晨龙
      段晨龙
      2020-05-08
      我的echarts是嵌套在swiper里面的
      2020-05-08
      回复
    • For the future
      For the future
      2020-05-08回复段晨龙
      没有影响,总之你就是需要干掉echarts的touch事件,让swiper滑动生效是吧?
      2020-05-08
      回复
    • 段晨龙
      段晨龙
      2020-05-08回复For the future
      好的,那我试一下
      2020-05-08
      回复
    • 段晨龙
      段晨龙
      2020-05-08
      这个getTouch函数写在哪儿写给谁呀
      2020-05-08
      回复
    • For the future
      For the future
      2020-05-08回复段晨龙
      在ec-canvas.js里面找个位置写就行,仔细看看代码
      2020-05-08
      回复
    查看更多(3)
  • xy
    xy
    2020-05-08

    贴下代码

    2020-05-08
    有用 1
    回复 2
    • 段晨龙
      段晨龙
      2020-05-08
      我的echarts是嵌套在swiper里面的
      2020-05-08
      回复
    • π
      π
      2020-05-14回复段晨龙
      嵌在swiper里面,层级不会有问题吗
      2020-05-14
      回复
  • 染影、、、流年🌾
    染影、、、流年🌾
    2020-08-26

    遇到跟你一样的问题,我也是将echarts嵌套在swiper里面的,但是我的echarts图表需要滑动。我整个页面超出的内容滑动到echarts部分后就无法再向下滑动了

    2020-08-26
    有用
    回复
登录 后发表内容
问题标签