侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序在ios下Echarts图表不能滑动的问题解决

微信(小程序)  /  管理员 发布于 3年前   223

问题现象

这个问题的现象说起来很简单。

小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容。

但是手指滑动区域在Echarts图表上时,页面却不能滑动了。

如下图:


追踪问题原因

因为在小程序上渲染图表用到的是echarts-for-weixin这个组件,而这个组件确实不支持一些Echarts功能。

所以最开始我怀疑是这个组件的问题,认为它把我的滑动事件给吞了。

为了确认这个问题,我直接在这个组件ec-canvas旁加了个兄弟节点view,然后用绝对定位将其覆盖在ec-canvas,这样滑动的时候就会滑动到我的view上而不是ec-canvas。

但是结果在ios下,还是不能滑动。

于是我给这个view的加了个背景色,在ios下的真机调试时发现,ec-canvas组件还是在view上面。

不论是加大view上的z-index值,还是将absolute改为fixed,反正ec-canvas组件所渲染的图表就是在view上面,而没有被view遮挡。

这个ec-canvas组件是如此出众,无论什么都遮盖不了它的风采。

而导致它如此出众的原因就是:图表是一个canvas组件,而小程序中canvas是一个原生组件。

接下来就让我们看看小程序中使用原生组件的限制。

小程序的原生组件使用限制

这里先附上链接:小程序原生组件使用限制。

让我们看看关键的地方:

也就是说canvas这类原生组件就是比view这种非原生的组件层级高。

用cover-view来解决?

为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件,可以覆盖在部分原生组件上面。这两个组件也是原生组件。

我将原来的兄弟view组件替换为了cover-view组件,然后希望达到可以滑动的效果。

虽然此时cover-view组件已经可以覆盖在canvas上了,但是依然不能滑动。

关于这个问题,我们可以认为小程序的所有组件都是放在webview中,而原生组件在webview中用的是占位符。

在滚动时,获取原生组件占位符的位置,再改变原生组件的位置。(如果仔细观察,会发现这些原生组件有时会产生一些奇怪的抖动,这一点可以佐证这个论点。)

所以ios下,我们手指在canvas和cover-view这类原生组件上滑动时,事件是不会传导到webview上的,页面也就不会滑动。

最终解决方案

对于这个问题,因为我这边和echarts的交互比较少,所以我的解决方案就是在echarts渲染完毕后将它替换为一张图片。

如果我更新了数据,那么就重新放出echarts,等它渲染完毕后,再次替换为一张图片。

由于公司代码不适合放出,所以我搞了个简易版的代码放在这里。

wxml文件关键代码:

  

js文件关键代码:

Page({ data: { ec: { }, echartImgSrc: '' }, initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { // ... }; chart.on('finished', () => { this.selectComponent('#mychart-dom-pie').canvasToTempFilePath({ success: res => {  this.setData({  echartImgSrc: res.tempFilePath  }) }, fail: res => console.log('转换图片失败', res) }); }) chart.setOption(option); return chart; }, echartInit(e) { this.initChart(e.detail.canvas, e.detail.width, e.detail.height); }});

总结

总的来说,解决起来还算简单。

但是对于和Echarts有很多交互的场景,这个方案就未必那么好实现了。

从这个问题入手,我对微信小程序原生组件的玩法有了更多的认识。

更深入一点的认识就是,微信小程序当下对原生组件的这种处理更像是在一件普通的布衣上贴上貂皮补丁。

虽然考虑到了原生组件所带来的性能优势,但是同样也会引发大量的问题,对于这件衣服的整体表现而言这些貂皮补丁恐怕并不见得是件好事。

希望以后小程序能从根本上解决这种问题吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • 微信小程序Echarts覆盖正常组件问题解决
  • 微信小程序Echarts图表组件使用方法详解
  • 微信小程序遍历Echarts图表实现多个饼图
  • 微信小程序中使用echarts的实现方法
  • 微信小程序中使用ECharts 异步加载数据实现图表功能
  • 微信小程序中使用ECharts 异步加载数据的方法
  • 微信小程序使用echarts获取数据并生成折线图


  • 上一条:
    如何自定义微信小程序tabbar上边框的颜色
    下一条:
    微信小程序自定义弹窗实现详解(可通用)
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • windows系统中安装FFMpeg及在phpstudy环境php7.3 + php-ffmpeg扩展的使用流程步骤(0个评论)
    • 在go语言中对浮点的数组、切片(slice)进行正向排序和反向排序(0个评论)
    • 在go语言中对整数数组、切片(slice)进行排序和反向排序(0个评论)
    • 在go语言中对字符串数组、切片(slice)进行排序和反向排序(0个评论)
    • 最新国内免注册ChatGPT体验站_ChatGPT镜像站访问链接地址2023/3/28持续更新(0个评论)
    • 在Laravel项目中的实现无密码认证之:发送邮箱链接授权(0个评论)
    • 在go语言中使用GoRoutines实现高性能并发批量调用api示例(0个评论)
    • Docker撤回受争议的收费方案,又可以继续使用docker了(0个评论)
    • 在go语言生成唯一ID之SnowFlake算法(0个评论)
    • ChatGPT再出新功能,推出插件功能,能联网、搜索了(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客