Vue中使用Bscroll @click无法执行的问题

最新推荐文章于 2024-04-22 11:31:13 发布
原创 最新推荐文章于 2024-04-22 11:31:13 发布 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决Bscroll默认关闭点击事件的问题方法。通过设置`click:true`参数，可以重新启用点击事件，并且可以根据需求进一步添加其他交互事件。

这个是由于，Bscroll默认点击事件关闭的

this.scroll = new Bscroll(this.$refs.wrapper, {click: true})

开启一下就好，后面还可以添加其他事件

解决 vue-seamless-scroll 无缝滚动点击事件失效问题
记录常见的问题以及解决办法
09-24 415
摘要：使用vue-seamless-scroll实现无缝滚动时，由于插件会克隆滚动数据，导致@click事件在克隆元素上失效。解决办法是......
vue2中引用及使用 better-scroll的方法详解
10-17
为了在页面渲染完成后初始化Better Scroll，我们可以选择在`mounted()`生命周期钩子中执行，或者在`created()`中使用`$nextTick()`确保DOM已经渲染完毕： ```javascript // 使用mounted() mounted() { this.scroll...
new BScroll 设置滚动条 vue3.0 全局loading
qq_34114535的博客
07-13 332
/ observeDOM: true
新版bscroll轮播图无缝切换
JaneChelle
10-18 736
  用bscroll手写一个轮播图，过程中遇到了很多坑，最主要的原因是bscroll新旧版本造成的。新版本中的一些调用方式、属性和旧版本的有差别。接下来是思路： 一、基本雏形 创建轮播图组件（slider）   slider表示最外层容器，slider中包含slider-group和dots。slider-group表示轮播的具体内容和dots表示图中的小圆点。 <div class="sl...
better-scroll的使用以及常见的api总结
浮生离梦的博客
12-18 3705
一、 better-scroll的使用 通过cnpm i -S better-scroll 或者是 npm i -S better-scroll 命令就可以进行下载better-scroll到项目中 通过import BScroll from 'better-scroll';语句引入到页面当中，再通过 new BScroll创建BScroll对象，接受两个参数，第一个是DOM对象，第二个是opt...
BScroll 滑动导致第一次点击无效
最新发布
qq_42423991的博客
04-22 310
在css中增加 pointer-events: auto!important;强制设置未 auto。同时在scrollEnd 中增加 slider1.isInTransition = false 代码。再移动端项目中出现，页面点击后在页面下方出现隐藏区域，向上滑动后，页面的点击事件无效。发现滑动元素的div子元素被添加了 pointer-events: none。
vue——vue-seamless-scroll中点击事件消失的问题
qq_45997679的博客
04-18 2300
在使用vue-seamless-scroll做页面自动滚动的时候，在添加点击事件后发现在滚动到第二遍的时候点击事件消失。最后发现是由于vue-seamless-scroll在实现滚动的时候自行复制了一份DOM，导致在复制的DOM出现的时候点击事件消失。 1、出现问题 2、解决办法 利用事件委托，在vue-seamless-scroll标签上一层添加@click="handleClick($event)"，然后将要传给事件的参数通过:data赋值给函数的形参。 ...
解决vue组件中click事件失效的问题
12-13
本文将详细解析如何解决Vue组件中click事件失效的问题，以及涉及到的Vuex中未知mutation类型的错误。 首先，让我们深入理解Vue中的事件绑定。Vue提供了多种方式来绑定事件，例如`v-on:click`、`@click`和`@click....
Vue移动端使用better-scroll时click事件失效的解决方法
综上所述，本文深入剖析了Vue移动端开发中使用better-scroll时click事件失效的技术原理及解决方案，强调了插件配置的重要性，并结合Vuex使用误区和组件封装技巧，全面提升了开发者对前端工程化、状态管理和用户体验...
【JavaScript源代码】vue开发移动端使用better-scroll时click事件失效的解决方案.docx
12-29
以上就是关于在Vue中使用`Better-Scroll`时遇到点击事件失效问题的解决方案，以及如何封装和使用`Better-Scroll`组件的详细介绍。通过理解和应用这些知识，开发者可以更有效地处理移动端项目的滚动交互。
vue中实现左右联动的效果
12-04
为此，我们在`handleGoodsItem`方法中使用`scrollToElement`： ```javascript methods: { handleGoodsItem (index) { let goodEle = this.$refs.good let foodList = goodEle.getElementsByClassName('...
bscroll.min.js
11-21
这是一个很好的适配移动端webapp开发的滑动组件，支持pc端，具有良好的扩展性和兼容性，使用简单
vue中better-scroll中页面滚动无效的问题
Buddha_ITXiong的博客
06-17 3574
因为在做项目的时候要用到滚动，所以引用了better-scroll这个插件，于是按照官网用法：&lt;script&gt; import BScroll from 'better-scroll' export default{ name: "CityList", mounted(){ this.scroll = new BScroll(this...
vue-seamless-scroll插件点击事件失效
qq_52441253的博客
01-31 472
vue-seamless-scroll插件点击事件失效。
用了better-scroll 之后点击事件失效的问题
worthyyyou的博客
09-10 346
问题：用了better-scroll 之后点击事件失效 原因：选项中的click属性默认是false 解决办法： let Scroll = new BScroll(".wrapper", { click:true; tap:true }) ``
使用better-scroll，真机测试时无法触发点击事件
weixin_44331586的博客
11-05 358
跟随慕课网写一个vue项目，在最后进行真机调试时发现已经设定好的点击事件无法被触发 在看了问答区之后知道了是better-scroll这个插件出了问题，它阻止了点击事件的触发 解决方法在创建实例时加入参数{click: true} mounted () { this.scroll = new Bscroll(this.$refs.search, {click: true}) } } ...
解决Better Scroll滚动条不能点击元素事件失效问题
sensendedede的博客
01-10 716
用BetterScroll做文章列表滚动容器会发生文章里的文字选中不可用，文章上的事件点击等等被禁用等问题。
BScroll 使用(Vue)
热门推荐
weixin_43069018的博客
03-13 1万+
下载 npm install better-scroll --save 引包 import BScroll from ‘better-scroll’ 使用 重点： 固定最外层容器高度 外层容器的第一个子元素高度 要超过外层容器高度 官方文档 ...
bScroll.移动端楼层（ajax）
fgiomg的博客
08-31 177
<!DOCTYPEhtml> <htmllang="en"style="font-size:100px;"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scal...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值