华山资源网

微信小程序在ios下Echarts图表不能滑动的问题解决
网络编程 2024/12/28 佚名
3 1

问题现象

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

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

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

如下图：

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

追踪问题原因

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

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

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

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

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

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

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

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

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

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

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

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

让我们看看关键的地方：

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

也就是说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文件关键代码：

<view class="echart-container">
 <image wx:if="{{echartImgSrc!==''}}" src="/UploadFiles/2021-04-02/{{echartImgSrc}}">


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有很多交互的场景，这个方案就未必那么好实现了。


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


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


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


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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/12/28

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com