canvas在scroll-view中触摸无法滑动问题

已于 2023-02-15 10:32:40 修改
阅读量554 收藏
点赞数
文章标签： 前端 javascript html 微信小程序
于 2023-02-15 10:31:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48299475/article/details/129038395
版权

canvas在scroll-view中触摸无法滑动

canvas的层级高于scroll-view,因为需求对canvas没有事件，采用了绘制canvas后将canvas生成图片，image标签在scroll-view中不会影响触摸滑动问题
//canvas生成图片
// pieCanvas是canvasId
wx.canvasToTempFilePath({
   canvasId: 'pieCanvas',
   success(res) {
     that.setData({
         pieImage: res.tempFilePath
     })
   }
 })
九零六.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序 canvas随页面滑动
qq_35056468的博客
09-08 3280
最近使用uniapp做小程序遇到一个问题，需要开发 图表功能，我选用了秋云 ucharts echarts 高性能跨全端图表组件。很快实现了功能。但是在真机测试的时候发现一个问题。 当页面的高度超过手机的高度的时候，滑动页面时canvans 图表也随着滚动，然后发现布局错乱了， 借鉴他人的的方法，给canvas 增加disable-scroll=“true” 并给canvas绑定一个触摸事件促使disable-scroll生效。真机运行的时候发现 是不会错位影响布局。但是当你点击区域处于canvans 区域
canvas-scroll:长img列表页面中的模拟滚动，由画布使用
05-13
关于canvas-scroll 打开手机浏览器，或者chrome模拟手机 基于canvas实现图片列表的滚动，通过移动端touch事件进行模拟滚动
微信小程序canvas不跟随scrollView滚动
Jone's Area
05-03 3308
需求 类似淘宝商品详情的长列表滚动，点击顶部需要滚动到指定位置 So 使用了ScrollView的属性“scroll-into-view”实现 但是，会发现scrollView中使用的uchart（主要是canvas）不会跟随滚动，canvas就像使用了fixed布局一样 微信很直接的说了canvas是原生组件，层级是最高的，无法嵌套在scroll-view、swiper、picker-view、movable-view 解决方案： 网上常说的:disable-scroll="true"、:.
小程序中的canvas不跟随scrollView滚动
zjq_1234的博客
04-18 1803
canvas不跟随scrollView滚动
微信小程序 在canvas画布上划动，页面禁止滑动
weixin_34260991的博客
07-25 1945
要实现微信小程序 在canvas画布上划动，页面禁止滑动，不仅要设置disable-scroll="true"，还要要给canvas绑定一个触摸事件才能生效。 <canvas canvas-id="myCanvas" class="myCanvas" disable-scroll="false" bindtouchstart="touchStart" bindtouchmove="t...
小程序滚动视图scroll-view
吕小布布布的博客
05-28 291
scroll-view:可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。 我们先来看下它的一些属性值： 以上内容转自微信官方文档小程序组件 wxml代码如下： <scroll-view scroll-x="true" class="scroll-header...
解决微信小程序scroll-view组件无横向滚动的问题
10-15
主要介绍了微信小程序scroll-view组件无横向滚动的解决方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序 scroll-view隐藏滚动条详解
01-03
一：scroll-view隐藏滚动条 在书写网页的时候，往往会为了页面的美观，而选择去掉滚动区域默认的滚动条，而...（3）onPullDownRefresh事件，无法在scroll-view中触发 （4）若想使用下拉刷新，一定要使用页面的滚动，而
Leaflet.Canvas-Markers-0.2.0
04-22
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
canvas-text-editor-tutorial:使用html5 canvas的简单文本编辑器
05-25
在所有现代浏览器中均可使用； 使用BDD或TDD构建。 我不打算具有以下任何功能来使任务更切合实际，因为这些主题中的每一个都有足够的问题来撰写有关以下内容的书： 支持RTL文本，象形文字和垂直文本； 搜索; ...
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
10-15
主要介绍了微信小程序scroll-view左侧导航栏点餐功能实现，点击种类，滚动到锚点；滚动到锚点，种类选中,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序解决关于ec-canvas不跟随页面滚动问题
weixin_43824144的博客
11-18 3244
微信小程序解决关于ec-canvas不跟随页面滚动问题 检查canvas所有父级元素是否有height:100% 去掉就好了
微信小程序使用echarts不跟随页面滚动的问题
samscat的博客
08-05 3821
在小程序使用echarts，图表展示出来之后不跟随页面滚动，浮在最上方。
用canvas画柱状图和HonrizantolScrollView的结合
让代码走着的博客
10-29 1169
首先，一些项目中会遇到柱状图，折线图等等，博主最近做了一个柱状图和HonrizantolScrollView结合，有柱状图并且可以滑动。 下面就给大家看看代码： activity_mian.xml xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android
ScrollView中ViewPager无法正常滑动问题
热门推荐
非著名程序员
07-31 1万+
本文主要介绍如何解决ViewPager在ScrollView中滑动经常失效、无法正常滑动问题。 解决方法只需要在接近水平滚动时ScrollView不处理事件而交由其子View(即这里的ViewPager)处理即可，重写ScrollView的onInterceptTouchEvent函数，如下： package cc.newnews.view; import android.content.C
微信小程序画布Canvas组件touchend事件不触发处理
chuangxin的专栏
10-17 7861
微信小程序画布Canvas组件touchend事件不触发处理
微信小程序 在canvas画布上划动，阻止页面上下滚动
qq_41974199的博客
11-05 2138
微信小程序 在canvas画布上划动，阻止页面上下滚动 // An highlighted block <canvas class="myCanvas" catchtouchstart="XXX" catchtouchend="XXX" catchtouchmove="XXX" canvas-id="canvas" > 我是一个禁止屏幕滚动的画布 </canvas...
html5 div scroll,html - html5 canvas scroll - Stack Overflow
weixin_36221941的博客
06-10 84
i have a requirement that I need to create a canvas and draw inside it programattically and put it inside a marquee, all these through javascript. Is it possible ? a few pointers pleaseAs a follow-up:...
模拟触摸方式滚动canvas
9r3y的专栏
03-17 6499
当canvas过大时需要加滚动条，为提高体验性最好以直接在canvas上触摸拖拽来滚屏胡。直接利用html自带的滚动条并不是最佳的实现方式，因为当canvas很大时即使只显示一部分也需要重绘整个canvas，此时滚动也会很卡。所以最佳的实现是直接用canvas模拟画出滚动条并加以鼠标交互。但如果canvas很小切大小也比较固定，沿用html的滚动条也能使实现简单化。下面是个demo：
scroll-view实现锚点
最新发布
10-09
scroll-view组件是Cocos Creator中的一个UI组件，用于在UI界面上显示可滚动的内容区域。如果要实现锚点功能，可以通过scroll-view的API来设置滚动位置。 要实现锚点，可以使用scrollToOffset函数。该函数可以将scroll-view滚动到指定的偏移量位置。偏移量以像素为单位，可以是正负值。具体步骤如下： 1. 获取scroll-view组件的引用，可以通过节点路径或者代码获取。 2. 计算锚点相对于scroll-view内容区域左上角的偏移量。偏移量可以根据需要自行计算，比如使用坐标差值等方法。 3. 使用scroll-view的scrollToOffset函数，将scroll-view滚动到指定的偏移量位置。 以下是一个示例代码片段，演示如何实现锚点功能： ```javascript // 获取scroll-view组件的引用 var scrollView = cc.find("Canvas/ScrollView").getComponent(cc.ScrollView); // 计算锚点相对于scroll-view内容区域左上角的偏移量 var anchorOffsetX = 100; // 假设锚点在x轴方向上的偏移量为100像素 var anchorOffsetY = 200; // 假设锚点在y轴方向上的偏移量为200像素 // 使用scroll-view的scrollToOffset函数，将scroll-view滚动到指定的偏移量位置 scrollView.scrollToOffset(cc.v2(anchorOffsetX, anchorOffsetY)); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值