小程序中的canvas不跟随scrollView滚动

最新推荐文章于 2024-06-29 09:52:53 发布

hongten_chen

最新推荐文章于 2024-06-29 09:52:53 发布

阅读量2k

点赞数

分类专栏：小程序 Echarts 文章标签：小程序前端 css

本文链接：https://blog.csdn.net/zjq_1234/article/details/130228092

版权

小程序同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Echarts

4 篇文章 0 订阅

订阅专栏

文章讨论了原生组件canvas在WebView渲染中的限制，如最高层级、无法被覆盖、特定组件内不可用以及CSS样式限制。提供的解决方法包括检查并修改canvas父元素的属性设置，以及使用旧版canvas选项force-use-old-canvas。

摘要由CSDN通过智能技术生成

问题原因，官方文件说明：canvas为原生组件故有一下的性质：

  由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制：
    组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。
    后插入的原生组件可以覆盖之前的原生组件。
    原生组件还无法在 scroll-view、swiper、picker-view、movable-view 中使用。
    部分CSS样式无法应用于原生组件，例如：
    无法对原生组件设置 CSS 动画
    无法定义原生组件为 position: fixed
    不能在父级节点使用 overflow:hidden 来裁剪原生组件的显示区域

原文链接：https://blog.csdn.net/qq_25740691/article/details/81867382

解决方法1：看看是不是给最外层标签page定义了height：100%的属性或者overflow相关的属性，如果是的话去掉。检查你的canvas的所有父级元素是否设置了height：100%，overflow相关的属性(visible除外)，以及position相关的属性(relative,static除外)，如果是的话都去掉。

方法2：使用旧的cavas即设置force-use-old-canvas="true"即可。


  <view class="ec-container">
    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"
     force-use-old-canvas="true"></ec-canvas>
  </view>