vue开发移动端使用better-scroll时click事件失效

最新推荐文章于 2024-05-16 10:58:26 发布
最新推荐文章于 2024-05-16 10:58:26 发布
阅读量9.3k 收藏 2
点赞数
分类专栏： vue学习 JavaScript学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39696861/article/details/80895600
版权

最近使用vue学习开发移动端的项目，使用了better-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候，点击事件失效，v-on:click、v-bind:click、@click.native都不行，试了一下@touchstart是却是可以的，发现better-scroll的配置中没有设置click：true，设置过之后click事件成功。

后来在使用vuex的时候一直报“[vuex] unknown mutation type: changeCity”，才发现在store文件中将mutations写在了state里面，被自己蠢哭了。。。正确写法如下：

Elsa_Panda
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
vue @click不生效_Vue+element(v2.3.2)(第四期)
weixin_33741534的博客
01-26 345
1.挂载全局变量url1.新增url.jsletBASE_URL="https://xxx.com";exportdefault{BASE_URL}2.main.jsimportgolbal_URLfrom"./utils/url";Vue.prototype.$BASE_URL=golbal_URL;3.页面使用console.log(this.$BASE_UR...
Vue自定义的组件@click失效
Mr.Zheng
06-19 551
Vue自定义的组件@click失效错误示例描述正确示例解释 错误示例 <template> <div> <Buttom text="确定" @click="handler()"></Buttom> <input type="button" @click="handler()" value="确定" /> </div> </template> import { Component, Prop, Vue
使用vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效的解决办法
最新发布
2401_84092903的博客
05-16 360
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue给同一元素绑定单击click和双击事件dblclick，双击事件dblclick无效不触发解决办法
小松鼠的博客
02-26 9764
有时vue项目中无论是v-ondblclick；还是@dblclick，有时会无效果。解决办法直接上代码自己看。 .native主要用于监听组件根元素的原生事件 @dblclick.native= 可完美解决dblclick 有时无效问题 <div class="grid-content"> <el-button 　　　　v-for="(item,index...
vue组件中click事件失效
酒馆不打烊
04-20 4161
使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候，点击事件失效，v-on:click、v-bind:click、@click.native都不行，试了一下@touchstart是却是可以的，发现better-scroll的配置中没有设置click：true，设置过之后click事件成功。 ...
解决vue组件中click事件失效的问题
12-13
最近使用vue学习开发移动端的项目，使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候，点击事件失效，v-on:click、v-bind:click、@click.native都不行，试了一下@touchstart是却是可以的，发现better-scroll的配置中没有设置click：true，设置过之后click事件成功。 后来在使用vuex的时候一直报“[vuex] unknown mutation type: changeCity”，才发现在store文件中将mutations写在了state里面，被自己蠢哭了。。。正确写法如下
【JavaScript源代码】vue开发移动端使用better-scroll时click事件失效的解决方案.docx
12-29
在使用Vue进行移动端开发时，有时会遇到在组件中集成Better-Scroll插件时点击事件失效的问题。在本文中，我们将深入探讨这个问题及其解决方案，并简要介绍如何在Vue项目中封装和使用Better-Scroll。 首先，`Better-...
vue使用better-scroll实现菜单列表左右联动
07-13
在现代前端开发中，Vue.js 是一款非常流行的轻量级框架，它提供了高效的数据绑定和组件化能力，使得开发者能够构建复杂且响应式的用户界面。而 Better-Scroll 是一个强大的滚动插件，它能帮助开发者在移动设备或者...
Vue项目中使用better-scroll实现一个轮播图自动播放功能
10-17
better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个...这篇文章主要介绍了Vue项目中使用better-scroll实现一个轮播图,需要的朋友可以参考下
Vue + better-scroll 实现移动端字母索引导航功能
08-27
在使用 better-scroll 时，需要注意probeType 的设置，probeType 为 3 时，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll ...
vue better-scroll插件使用详解
08-28
本篇文章主要介绍了vue better-scroll插件的使用详解，better-scroll是一个移动端滚动的解决方案，它基于iscroll的重写，具有强大的功能，可以实现普通的滚动列表、轮播图、picker等等。 better-scroll的使用需要在...
VUE解决 v-html不能触发点击事件的问题
10-16
今天小编就为大家分享一篇VUE解决 v-html不能触发点击事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-click事件
ANNENBERG的博客
07-16 1370
click.self事件只作用在元素本身，而不是其子元素。@click.prevent阻止事件默认行为。@click.stop阻止事件冒泡。@click.native组件事件。
Vue.js基础-07-绑定事件（v-on）-01-点击事件（click）
运维玄德公
05-31 6274
1. 点击事件参数（click） 1.1 基本使用 1.2 绑定一个方法 1.3 冒泡事件 说明 示例 2. 点击事件修饰符 2.1 .stop （阻止冒泡） 使用说明 使用示例 2.2 capture （捕获冒泡） 使用说明 使用示例 2.3 .self （只监听触发该元素的事件） 使用说明 使用示例 2.4 once （事件只触发一次） 使用说明 使用示例 2.5 鼠标的修饰符......
Vue教程(三)click 事件
yuan_xw的专栏
08-07 7307
03.【vue】click 事件 click 事件属性 新的属性: methods,该属性用于在 Vue 对象中定义方法。 新的指令:@cick,该指令用于监听某个元素的点击事件,并且需要指定当发生点击时,执行的方法方法通常是 methods 中定义的方法) 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>03_clic
vue @click的常用方法
热门推荐
蠢蠢欲动的猫
12-10 1万+
点击事件的常用方法 **v-on click 简写是@click** **点击事件的常见的几种使用方法(在vue中)：** ​ 1.prevent：阻止默认事件（常用）； ​ 2.stop：阻止事件冒泡（常用）； ​ 3.once：事件只触发一次（常用）； ​ 4.capture：使用事件的捕获模式； ​ 5.self：只有event.target是当前操作的元素时才触发事件； ​
vue子组件绑定事件失效问题
一止弋的博客
09-05 6580
vue中子组件绑定事件失效问题 最近在学习vue的过程中，深刻领会到组件机制的便利，但也遇到了一些麻烦的问题。 vue中在父组件中引入一个子组件，想要直接在父组件中给子组件或者包含子组件的dom元素设置是行不通的。 正确的方法是：先在子组件中监听相关事件，监听到后，将监听到的事件连带相关的参数一同返回到父组件中处理。 子组件中监听事件 &amp;lt;div class=&quot;con&quot; @cli...
Vue.js 在组件上添加click事件，不触发组件内的事件，只触发在组件上添加的事件
m0_53397360的博客
03-27 1285
component1组件中存在jumpHome()事件，点击会触发，同时给component1添加jumpUrl事件，通过使用==@click.native.capture.stop==只触发组件上添加的事件不出触发组件内的事件。3、@click.native 侦听组件根元素上的原生事件。2、@click.capture 优先触发。1、@click.stop 阻止事件冒泡。
Vue2——组件的自定义事件
mantou_riji的博客
07-20 3549
我们也可以定义组件的自定义事件，这样定义出来的事件是给组件用的。父组件定义自定义事件和触发的函数
vue3封装better-scroll问题
12-21
在Vue3中封装better-scroll可以按照以下步骤进行： 1. 首先，安装better-scroll依赖： ```shell npm install better-scroll --save ``` 2. 在Vue组件中引入better-scroll并进行封装： ```vue <template> <div class="wrapper" ref="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> </div> </template> <script> import { ref, onMounted } from 'vue' import BScroll from 'better-scroll' export default { setup() { const wrapperRef = ref(null) let scroll onMounted(() => { scroll = new BScroll(wrapperRef.value, {}) }) return { wrapperRef } } } </script> ``` 在上述代码中，我们使用了Vue3的Composition API来封装better-scroll。通过`ref`函数创建了一个`wrapperRef`引用，用于获取DOM元素的引用。然后，在`onMounted`钩子函数中，创建了一个新的better-scroll实例，并将其绑定到`wrapperRef`所引用的DOM元素上。 这样，我们就完成了在Vue3中封装better-scroll的过程。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值