uniapp scroll-view组件滚动时报错 [Intervention] Ignored attempt to cancel a touchmove event with cancelabl

xuelong-ming

于 2024-07-23 16:57:56 发布

阅读量357

点赞数 3

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/xuelong5201314/article/details/140640613

版权

uniapp 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

问题

使用scroll-view组件滚动时报错

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

报错截图
在这里插入图片描述

解决方法

添加 @touchmove.stop 即可

<scroll-view scroll-y="true"  @touchmove.stop></scroll-view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xuelong-ming

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

uniapp scroll-view 横向和纵向滚动带滚动回调

09-10

在uni-app框架中，`scroll-view`组件是一个非常实用的工具，它允许开发者实现横向和纵向的滚动，并且可以添加滚动回调功能，以便在用户滚动时执行特定的操作。下面将详细讲解uni-app的`scroll-view`组件及其相关的...

scroll-view 滚动时报错Ignored attempt to cancel a touchmove event with cancelable=false

热门推荐

WEB木易

09-02

4万+

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted 如何解决使用css3 touch-action: non...

关于Ignored attempt to cancel a touchmove event with cancelable=false问题

qq_45876765的博客

12-12

1238

关于：Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.报错问题

小程序vant组件库报错[渲染层错误] Ignored attempt to cancel a touchmove event with cancelable=false, for example b

qq_30351747的博客

09-25

6523

小程序使用van-swipe-cell滑动报错意思就是有一个设置cancelable=false的touchmove事件和其他某个滚动的操作冲突了解决：在其外层添加 touch-action: none;就可以了 .van-cell { touch-action: none; } touch-action ：当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。 touch-action取值有一下两种 none：系统默认菜单被禁用 default：系统默认菜单不被禁用 .........

微信小程序scroll-view组件实现滚动动画

12-29

本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果，供大家参考，具体内容如下效果图实现原理利用scroll-view的scroll-into-view属性进行定位；利用scroll-view的scroll-with-animation属性实现...

微信小程序scroll-view实现滚动穿透和阻止滚动的方法

10-18

在微信小程序开发中，`scroll-view` 是一个非常重要的组件，用于实现页面的滚动效果。在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序...

微信小程序 scroll-view的使用案例代码详解

10-15

在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它提供了一个可滚动的视图容器，能够处理复杂的滚动需求，包括横向和纵向滚动。本文将深入探讨 `scroll-view` 的使用方法，并通过具体的代码案例进行解析...

解决swiper报错[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for exam

qq_40430937的博客

11-29

2066

解决swiper报错[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

uni-h5.es.js:25055 [Intervention]Ignored attempt to cancel a touchmove event with cancelable=false,

JiuMeilove的博客

12-06

768

在 JavaScript 中，可以使用 event.preventDefault() 来阻止浏览器默认的行为。然而，一些事件（如 touchmove）的默认行为是无法取消的，除非事件还没有开始或者事件已经被取消。如果滚动正在进行，浏览器会忽略对这个事件的取消。这个问题来自 uni-h5.es.js 的一个报错信息。看起来是在尝试阻止一个 touchmove 事件的默认行为，但该事件是不可取消的。这个错误通常在阻止一个已经处于活动状态的（比如滚动）touchmove事件时发生。

【报错记录】TouchMove事件中(忽略取消一个touchmove事件的尝试(cancelable=false)，例如，因为滚动正在进行中，不能被中断。)的问题解决方案

weixin_42582523的博客

12-17

2495

TouchMove事件中(忽略取消一个touchmove事件的尝试(cancelable=false)，例如，因为滚动正在进行中，不能被中断。)的问题解决方案

解决uniapp scroll-view组件滚动报错Ignored attempt to cancel a touchmove event with cancelable=false

我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。

06-18

744

添加 @touchmove.stop 即可。

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=f

YouthMe的博客

01-19

1万+

Vue新手上路 Vue-Awesome-Swiper 滑动报错我们只需要将滑动报错的标签上加上一个样式即可 touch-action: none; touch-action ：当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。 touch-action取值有一下两种 none：系统默认菜单被禁用 default：系统默认菜单不被禁用 ...

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false

天麟江的博客

04-29

1705

今天，在解决微信内部vue页面拖拽冲突的时候（感谢微信浏览器拖动出现黑色/白色背景、网址问题解决方案提供的方案）使用e.preventDefault();的时候，代码报错： [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. 网上的解决...

Ignored attempt to cancel a touchmove event with cancelable=false问题

qq_41956361的博客

01-07

1517

翻译过来就是忽略取消触摸移动事件的尝试，cancelable=false，我尝试将滚动区域设置属性，cancelable=false发现还是没用，在看网上的配置style发现还是没能解决我的问题，前言:关于我在uniapp项目中使用到了u-popup弹层又在里面加入了scoll-view实现滚动，当我想试下下拉触底的时候弹出该错误，那么我们还如何解决！那么我们该如何解决呢！嗯，这样就不会报错了。

uniapp scroll-view纵向滚动

09-01

在uniapp中，可以通过scroll-view组件来实现纵向滚动。要开启纵向滚动功能，只需将scroll-view组件的scroll-y属性设置为true，并给scroll-view设置一个高度。当内容的高度大于scroll-view的高度时，就可以实现滚动功能。如果内容的高度小于scroll-view的高度，则无法体现滚动功能。引用以下是一个实现纵向滚动的示例代码： ``` <template> <view> <scroll-view scroll-y="true" style="height: 500rpx;">  </scroll-view> </view> </template> ``` 在这个示例中，scroll-view组件的scroll-y属性被设置为true，表示开启了纵向滚动功能。同时，给scroll-view组件设置了一个高度为500rpx，以确定滚动区域的高度。在scroll-view内部，你可以放置需要滚动的内容。只要内容的高度大于scroll-view的高度，就可以实现纵向滚动。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [uniapp scroll-view基础用法](https://blog.csdn.net/lxgyydsgod/article/details/126212359)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]