【微信小程序】ec-canvas不跟随页面上下滚动

最新推荐文章于 2023-10-13 10:37:12 发布
最新推荐文章于 2023-10-13 10:37:12 发布
阅读量787 收藏 1
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45326220/article/details/132226920
版权

​

问题：

页面上下滚动，echarts浮在页面上方不动

解决方法

  1. page的样式是否设为height: 100%;，若有，请删除
  2. 所有的父级样式不能使用position: fixed/absulote;
  3. 在ec-canvas标签中添加force-use-old-canvas="true"属性

​

Saya Cintamu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
小程序在canvas上层做图片滚动
a_靖的博客
05-11 2057
实现该功能踩过的坑 1.swiper的swiper-item中image图片无法在canvas的上层显示，会被canvas 覆盖 2.swiper的swiper-item 里面放cover-image 会样式错乱 3.scroll-view里面放cover-image 会样式错乱 解决方案：使用CSS样式实现，超出部分隐藏，显示滚动条 <cover-view class="popupCrad"> <cover-image class="popupCrads"..
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
10-15
主要介绍了微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
小程序中的canvas不跟随scrollView滚动
zjq_1234的博客
04-18 1878
canvas不跟随scrollView滚动
微信小程序解决关于ec-canvas不跟随页面滚动问题
weixin_43824144的博客
11-18 3294
微信小程序解决关于ec-canvas不跟随页面滚动问题 检查canvas所有父级元素是否有height:100% 去掉就好了
小程序 ec canvas跟随页面滚动
最新发布
m0_61020843的博客
10-13 355
给ec-canvas设置属性。
微信小程序canvas不跟随scrollView滚动
Jone's Area
05-03 3340
需求 类似淘宝商品详情的长列表滚动，点击顶部需要滚动到指定位置 So 使用了ScrollView的属性“scroll-into-view”实现 但是，会发现scrollView中使用的uchart（主要是canvas）不会跟随滚动，canvas就像使用了fixed布局一样 微信很直接的说了canvas是原生组件，层级是最高的，无法嵌套在scroll-view、swiper、picker-view、movable-view 解决方案： 网上常说的:disable-scroll="true"、:.
微信小程序ec-canvas
03-10
在微信小程序中，`ec-canvas` 是一个特殊的画布组件，它能够提供丰富的图形绘制能力，如线条、形状、图像处理等，这对于创建动态图表、游戏、数据可视化等场景非常有用。然而，在实际使用中，开发者可能会遇到一些...
微信小程序 uni-app wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分
09-01
【微信小程序 uni-app wxml-to-canvas】是一个用于在微信小程序中利用静态模板和样式来绘制canvas，并最终能够导出为图片的工具。这个技术在实际应用中特别适合用来生成分享图，即用户在社交平台上分享时看到的个性...
微信小程序-canvas-剪切保存图片
05-06
一个微信小程序demo，用户可以上传一张图片，在canvas画布上展示，然后可以平移、单指旋转、双指缩放图片，最后将canvas区域内的图片内容保存到本地相册。采用了微信开发者文档的最新api，能够兼容大多数的场景，并...
微信小程序-微信小程序之Canvas
08-06
We-Canvas 1.We-Canvas之WaveImage 效果图： 实现细节： 1.js: drawImage:function(data){ var that = this var p10= data[0][0]; /* 三阶贝塞尔曲线起点坐标值*/ var p11= data[0][1]; /* 三阶贝塞尔曲线第一...
微信小程序canvas组件应用Demo
01-08
cavas组件编辑图片，添加文字，修改背景颜色等，来源为github
微信小程序在ios下Echarts图表不能滑动的问题解决
12-10
问题现象 这个问题的现象说起来很简单。 小程序页面中有一篇很长的文章，内部有一个Echarts图表，手指上下滑动观看内容。 但是手指滑动区域在Echarts图表上时，页面却不能滑动了。 如下图： 追踪问题原因 因为在小程序上渲染图表用到的是echarts-for-weixin这个组件,而这个组件确实不支持一些Echarts功能。 所以最开始我怀疑是这个组件的问题，认为它把我的滑动事件给吞了。 为了确认这个问题，我直接在这个组件ec-canvas旁加了个兄弟节点view，然后用绝对定位将其覆盖在ec-canvas，这样滑动的时候就会滑动到我的view上而不是ec-canvas。 但是结果
解决微信小程序scroll-view组件无横向滚动的问题
10-15
在微信小程序开发中，`scroll-view`组件是一个非常重要的组件，它允许用户在内容超过屏幕范围时进行滚动浏览。然而，有时我们可能会遇到一个常见问题，即`scroll-view`组件无法实现横向滚动。本文将详细解析这个问题...
uniapp 下拉刷新canvas元素悬浮，内容不随父组件滚动问题
qq_24001067的博客
06-25 753
3.去掉scroll-view 使用，不要需要下拉的内容放在scroll-view中，使用uniapp的api方法 onPullDownRefresh进行下拉刷新。2.经查看之前写的代码，使用的scroll-view包裹并使用scroll-view的下拉刷新。1.首先现根据官网的tips，看看自己是不是把canvas写在这个组件里了。
微信小程序 顶部搜索 吸顶 不随页面滚动而滚动
weixin_45689786的博客
04-28 3342
微信小程序 搜索框 顶部吸顶 顶部购物车栏固定 不随页面滚动而滚动。
使用canvas实现微信小程序滑动解锁功能 ；解决canvas图层随背景能上下滑动导致页面错乱问题；
m0_47791238的博客
03-04 1256
使用canvas实现微信小程序滑动解锁功能 ；解决canvas图层随背景能上下滑动导致页面错乱问题；
uniapp微信小程序scroll-view头部固定在页面上，不会随着页面滚动而移动
weixin_38905666的博客
03-21 3075
scroll-view，顶部定位
微信小程序ec-canvas 使用时 canvas标签内的ec属性不起作用，不执行ec中的onInit方法
05-27
在微信小程序中使用ECharts需要使用`ec-canvas`组件，并在组件中设置`canvas-id`和`ec`属性。如果您在canvas标签内设置了`ec`属性，但是`onInit`方法没有被执行，可能是因为您没有正确地引入ec-canvas组件或者没有正确地配置`onInit`方法。以下是一个基本的使用ec-canvas的示例： 1. 在WXML文件中引入ec-canvas组件。 ```html <!-- index.wxml --> <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> ``` 2. 在JS文件中初始化ec-canvas组件，并设置`onInit`方法。 ```javascript // index.js import * as echarts from '../../components/ec-canvas/echarts'; Page({ data: { ec: { onInit: initChart } }, onLoad: function (options) { // ... } }); function initChart(canvas, width, height, dpr) { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // 分辨率 }); canvas.setChart(chart); const option = { // ... }; chart.setOption(option); return chart; } ``` 请注意，`onInit`方法必须在组件的`ec`属性中设置，并且需要传入一个函数，该函数会在组件初始化时被调用。该函数必须接受四个参数：canvas、width、height和dpr。在该函数中，您可以使用ECharts的API初始化图表，并将图表对象返回。最后，您需要在图表对象上调用`setOption`方法，将选项对象传递给图表。 如果您已经正确地引入ec-canvas组件，并设置了`onInit`方法，但仍然无法正常工作，请检查您的选项对象是否正确，并确保ECharts库已正确地引入到您的小程序中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值