小程序开发：canvas在画布上滑动，页面跟着滑动问题

最新推荐文章于 2026-03-28 02:31:33 发布
转载 最新推荐文章于 2026-03-28 02:31:33 发布 · 2.2k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：http://www.cnblogs.com/woshidouzia/p/10784437.html
本文介绍在微信小程序中如何使用disable-scroll属性阻止Canvas组件的滚动，并强调了在真机上使该属性生效需要绑定触摸事件的重要性。文章提供了具体的代码示例。

微信小程序官方文档有说明，disable-scroll="true" 可以阻止页面下拉和滚动。这里有个坑，disable-scroll在真机上如果要生效，那么要给canvas绑定一个触摸事件才能生效。

必须绑定三个事件真机才能捕获到

<canvas disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" canvas-id="canvas" class="canvas"></canvas>

转载于:https://www.cnblogs.com/woshidouzia/p/10784437.html

标签
#javascript #移动开发 #ViewUI
dengwei4048
关注
微信小程序--在CANVAS画布上划动，页面禁止滑动(二维吗)
林中明月间丶
07-31 1861
https://www.cnblogs.com/woshidouzia/p/10784437.html 要实现微信小程序 在canvas画布上划动，页面禁止滑动，不仅要设置disable-scroll="true"，还要要给canvas绑定一个触摸事件才能生效。 <canvas canvas-id="myCanvas" class="myCanvas" disable-scroll="false" bindtouchstart="touchStart" bindtouchmove="touc
【小程序问题】微信小程序 在canvas画布上划动 页面跟着滑动
热门推荐
L的博客
05-17 1万+
微信小程序官方文档有说明，disable-scroll="true" 可以阻止页面下拉和滚动。这里有个坑，disable-scroll在真机上如果要生效，那么要给canvas绑定一个触摸事件才能生效。&lt;canvas disable-scroll="true" bindtouchmove="touchMove"&gt;&lt;/canvas&gt; 顺便说一下canvas触摸事件的坑，在can...
微信小程序 canvas随页面滑动
qq_35056468的博客
09-08 4039
最近使用uniapp做小程序遇到一个问题，需要开发 图表功能，我选用了秋云 ucharts echarts 高性能跨全端图表组件。很快实现了功能。但是在真机测试的时候发现一个问题。 当页面的高度超过手机的高度的时候，滑动页面时canvans 图表也随着滚动，然后发现布局错乱了， 借鉴他人的的方法，给canvas 增加disable-scroll=“true” 并给canvas绑定一个触摸事件促使disable-scroll生效。真机运行的时候发现 是不会错位影响布局。但是当你点击区域处于canvans 区域
使用canvas实现微信小程序滑动解锁功能 ；解决canvas图层随背景能上下滑动导致页面错乱问题；
m0_47791238的博客
03-04 1681
使用canvas实现微信小程序滑动解锁功能 ；解决canvas图层随背景能上下滑动导致页面错乱问题；
android canvas 绘图 一闪一闪_小程序canvas动画解决方案，绘制一个塔罗牌动画
weixin_39754142的博客
12-29 743
目前还有个问题：android上面无卡顿，但是ios直接把微信卡掉！wxml<canvas style='width:{{windowWidth}}px;height:{{height}}px; position: fixed;' canvas-id="secondCanvas0"> </canvas> <canvas style='width:{{windowWi...
小程序上下滑动的时候,canvas 也会跟着滑动
weixin_43923202的博客
04-13 2924
html 保存本地 尝试了disable-scroll=“true” bindtouchstart=“touchStart” bindtouchmove=“touchMove” bindtouchend=“touchEnd”，但不管用。 所以在遮罩上添加catchtouchmove='true’就ok了。 附加一个canvas js文件： createCanvas: functio...
canvas签名页面跟着滑动bug
q1553048604的博客
12-27 1073
遮罩层上canvas签名页面滑动bug
【备忘录】微信小程序原生控件canvas在iphone中上下滑动
小潘的备忘录
02-22 1380
问题原因： 在开发过程中使用画布canvas时，发现在iphone中 有上下滑动，导致自定义的画布也上下滑动， 解决思路： 首先想到的是 绝对定位，然而 并不好用，该滑还是滑， 继续 在文档中发现 disable-scroll属性，设置，然而 ，并不好用（在画布外部上下滑，还是会跟着动）。 继续查文档，发现有人提到了页面disableScroll属性。终于找到解决方法 解决方法： 在页...
小程序上下滑动页面时canvas绘制的图出现抖动的情况
深圳最菜前端
06-08 2593
刚做好了一个需求，但是做测试的时候发现，出现小程序上下滑动页面时canvas绘制的图出现抖动的情况 网上一大堆答案，基本都是解决点击canvas滑动时，不允许下面的页面一起跟着滑动，但是我要的效果是，我不管点击canvas也好，还是点击页面其他地方也好，是可以滑动的，并且canvas不出现抖动的情况 红色选中的部分，是canvas画的，在页面上下滑动的时候，会抖动的情况，各种网上找答案 最后取个巧，把绘制好的canvas重新生成图片，然后放在原来的位置上去，这样就不会出现抖动的情况了，而且也可以正常滑动
微信小程序 canvas 定位失效
dongcehao的博客
07-13 3604
微信小程序之中，之前使用了 canvas 来进行动画处理。 但是发现这里会有一个问题： 不巧的是，canvas 就是一个原生组件，同时会出现在最顶层 所以定位失效，特别是在 ios 里面，小程序 上下滑动的时候，canvas 也会跟着滑动 这里就使用了 config = { disableScroll: true, }; 来禁止页面滑...
【小程序】ucharts、echarts图表影响页面滑动解决方案
AnsonChen的博客
04-10 8332
使用ucharts绘制图表后在真机上出现无法正常滑动页面，滑动时只是绘制的canvas跟着滑动，并且因为层级过高会挡住底部的tabbar栏。 解决方案：使用官方提供的cover-view组件，在canvas所在的容器写一个同级的cover-view，宽高100% absolute定位覆盖在canvas所在容器。tabbar栏也改用cover-view和cover-image组件去写。 &...
微信小程序使用echart层级问题（IOS）
SunShinessx的博客
05-23 3770
问题场景： 在开发小程序的时候，用到了echart。echart是用canvas画的。在小程序里面层级是最高的。所以出现了这个问题： 而实际图是这样的： 也就是说手指滑动图表的时候。整个图会上滑动。 问题原因： 页面中布局用了fixed。而ios在fixed上的坑就是：层级高的只要触摸滑动，层级低的内容就会跟着滑动。 通常解决方法是： 层级高的加catchtouchmove=...
微信小程序canvas弹框固定不动
haha57的博客
06-18 2867
在开发小程序页面时，弹框的内容里包含canvas组件，由于canvas不能用定位fixed，导致底部页面滚动条滚动时，导致弹框里的canvas也跟着动，如下图所示，canvas里的二维码随着滚动条移动出界。 解决办法是：在包含canvas的view设置catchtouchmove="return" ，这样就可以阻止触摸屏穿透底部页面滚动，防止canvas组件滑动出界，代码简写大概如下所示。 <!-- 背景阴影 --> <view catchtouchmove="return".
微信小程序原生组件层级难题：如何让Canvas在长列表滚动中“随波逐流”？
weixin_29015801的博客
03-08 225
本文深入剖析了微信小程序中Canvas等原生组件在ScrollView内无法跟随滚动的层级难题。通过揭示原生组件层级最高的底层原理，提出了抛弃ScrollView、改用页面级滚动并配合wx.pageScrollTo等API实现精准定位的实战解决方案，有效解决了Canvas在长列表中的视觉割裂问题。
微信小程序原生组件层级难题：Canvas与ScrollView的滚动冲突实战解析
最新发布
weixin_30374009的博客
03-28 410
本文深入解析微信小程序中Canvas与ScrollView的滚动冲突问题，揭示原生组件的层级特性及其底层机制。通过实战案例，提供放弃ScrollView、改用普通View结合pageScrollTo API的解决方案，并分享性能优化技巧与进阶方案，帮助开发者高效解决Canvas悬浮问题。
微信小程序原生组件层级难题：如何让Canvas在长列表滚动中“听话”
ice55的博客
03-01 190
本文深入解析了微信小程序中Canvas等原生组件在scroll-view内无法正常滚动的根本原因，即原生组件层级独立于WebView层。文章提出了弃用scroll-view、拥抱页面级滚动的核心解决方案，并手把手演示了如何利用wx.createSelectorQuery和wx.pageScrollTo等API，实现类似淘宝详情页的精准锚点定位与吸顶导航功能，有效解决Canvas在长列表中的显示难题。
vue 使用原生canvas_小程序挖坑之路__Vue.js__GitHub__前端__Canvas
weixin_42347522的博客
12-30 416
小程序出来那么久一直没有深入的开发，这次借着公司要做小程序，深入探索了一番，结果挖坑无数，当然，仅限挖坑，并没有填完。哈哈，就先mark一下。因为公司业务需求，这次小程序用的是 mpvue + typescript 进行开发。mpvue 相关的坑关于input问题因为设计想把输入框的交互做成这个样子：那用原生的输入框是满足不了的，只能自己写组件咯。那么就用vue的方式写了个组件，结果发现，mpvu...
细数小程序的坑
人间草木
07-29 434
最近做了一个应用，把玩了一下小程序。总体感觉还是可以，但是限制太多，最适合的场景可能就是手机小型应用。这节，我们来细数一下小程序开发过程的坑。 一、小程序注册前提 小程序注册的前提是，没有注册过任何的微公众平，如未注册过订阅号、服务号之类的。邮箱要求也是是这样的： 未被公众平台注册，未被开放平台注册，未被个人微信号绑定的邮箱 恰巧之前开发过微信公众号，结果登陆后死活找不到小程序，...
微信小程序中ECharts图表固定显示与滚动冲突的解决方案
g5h6i的博客
03-01 1076
本文深入解析了微信小程序中ECharts图表无法跟随页面滚动的常见问题，并提供了核心解决方案。通过详细阐述 `force-use-old-canvas` 属性的作用机制，手把手指导开发者配置可滚动的图表，并分享了进阶调试技巧与性能优化建议，帮助开发者彻底解决图表固定显示与滚动的冲突。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值