vue那些坑2 vue-awesome-swiper，[Intervention] Ignored attempt to cancel a touchend event with cancelable

最新推荐文章于 2024-03-22 09:55:55 发布
最新推荐文章于 2024-03-22 09:55:55 发布
阅读量557 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zouyunchong/article/details/108466799
版权

大家在编写vue项目时当我们使用vue-awesome-swiper滑动插件(这个是我们滑动轮播图出现的)
在这里插入图片描述

这个警告⚠️出现的原因是因为触发了默认事件(具体原因可自行百度)
解决办法 在style样式里加入

  • touch-action:false(如果是使用stylus编写样式，一定要注意缩进)
    在这里插入图片描述
zouyunchong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue引入新版 vue-awesome-swiper插件填坑问题
08-28
Vue-Awesome-Swiper 插件填坑问题详解 在本文中，我们将详细介绍 Vue 引入新版 Vue-Awesome-Swiper 插件填坑问题的解决方案。Vue-Awesome-Swiper 是一个基于 Swiper 的 Vue 组件库，它提供了许多有用的功能，如滑块...
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
Vue.js 社区为此开发了一个名为 vue-awesome-swiper 的插件，它为 Vue 应用提供了与 Swiper 类似的功能。 首先，要在项目中安装 vue-awesome-swiper，可以使用 npm 安装工具，命令如下： ```bash npm install vue-...
三种方法解决[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false
weixin_44479794的博客
05-25 2万+
问题背景，开发一个uniapp项目时，需要使用做一个能左右滑动的表，如下图 使用的组件为scroll-view，代码截图 bug：左右滑动时，会报错，报错信息如下 [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,scrolling is in progress and cann
cyx2350356668的博客
03-14 2万+
.Ignored attempt to cancel a touchmove event with cancelable=false,scrolling is in progress and cannot be interrupted.at vendorsconfiglogin.js:1 移动端滑动滚动条过快报了这个错，查找原因是所引用框架里一个组件的小bug，把框架源码修改下就好了。 解决步骤如...
解决报错,Ignored attempt to cancel a touchmove event with cancelable=false
xiaojian_521的博客
06-30 2万+
解决报错:[Intervention]Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example becaus
热门推荐
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...
小程序vant组件库报错[渲染层错误] Ignored attempt to cancel a touchmove event with cancelable=false, for example b
qq_30351747的博客
09-25 6468
小程序使用van-swipe-cell滑动报错 意思就是有一个设置cancelable=false的touchmove事件和其他某个滚动的操作冲突了 解决：在其外层添加 touch-action: none;就可以了 .van-cell { touch-action: none; } touch-action ：当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。 touch-action取值有一下两种 none：系统默认菜单被禁用 default：系统默认菜单不被禁用 .........
vue轮播图插件vue-awesome-swiper
11-28
Vue-Awesome-Swiper 轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端，SPA和SSR。 例子 例子 安装设置 安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import ...
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
10-17
说到h5的翻页，很定第一时间想到的是swiper。但是我当时想到的却是，vue里边怎么用swiper。这篇文章主要介绍了vue-awesome-swiper - 基于vue实现h5滑动翻页效果 ,需要的朋友可以参考下
解决swiper报错[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for exam
qq_40430937的博客
11-29 1954
解决swiper报错[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_45876765的博客
12-12 580
关于：Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.报错问题
使用swiper报错：[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false
DemoJx的博客
10-18 3505
使用swiper报错：[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false
vue项目中使用mint-ui Loadmore组件报错解决方案： Ignored attempt to cancel a touchmove event with cancelable=false
张培跃的个人博客
09-01 6667
报错内容如下： [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. 上面的内容虽然不会影响到项目的运行效果，但看着飘一串红字总是稍有一些不爽，所...
scroll-view 滚动时报错Ignored attempt to cancel a touchmove event with cancelable=false
最新发布
weixin_37331593的博客
03-22 379
uniapp项目，使用scroll-view 频繁滚动时报错。
【报错记录】TouchMove事件中(忽略取消一个touchmove事件的尝试(cancelable=false)，例如，因为滚动正在进行中，不能被中断。)的问题解决方案
weixin_42582523的博客
12-17 2262
TouchMove事件中(忽略取消一个touchmove事件的尝试(cancelable=false)，例如，因为滚动正在进行中，不能被中断。)的问题解决方案
Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is
时倾_于你
08-12 3863
Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted 解决方案： 1.node_modules——ionic——core——dist——esm——ion-datetime_3-i...
vue
qq_43008504的博客
11-25 112
vue使用vue-awesome-swiper报错：Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. 方法一：在需要滚动的标签外层添加 touch-action: non...
解决Vue报错：Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example
m0_52364694的博客
08-08 3156
错误提示：Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. 解决方法 reset.css中加入代码 *{ touch-action: none; }
vue-awesome-swiper swiper-slide点击事件
03-02
vue-awesome-swiper是一个基于Vue.js的轮播组件，它是对Swiper的封装和扩展。swiper-slide是vue-awesome-swiper中的一个组件，用于展示轮播项。要给swiper-slide添加点击事件，可以通过以下步骤实现： 1. 首先，在你的Vue组件中引入vue-awesome-swiper和swiper-slide组件： ```javascript import { swiper, swiperSlide } from 'vue-awesome-swiper' ``` 2. 在template中使用swiper和swiper-slide组件，并给swiper-slide添加@click事件： ```html <swiper> <swiper-slide v-for="(item, index) in items" :key="index" @click="handleSlideClick(item)"> <!-- 轮播项内容 --> </swiper-slide> </swiper> ``` 3. 在methods中定义handleSlideClick方法来处理点击事件： ```javascript methods: { handleSlideClick(item) { // 处理点击事件的逻辑 } } ``` 这样，当用户点击swiper-slide时，handleSlideClick方法会被调用，并传入对应的item参数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值