2021-11-03 学习记录--vue--betterScroll里设置click: true限制谁可以点击，谁不可以点击

于 2021-11-03 17:51:40 发布
阅读量219 收藏
点赞数 2
分类专栏： 学习-vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48850734/article/details/121126898
版权

betterScroll里设置click: true限制谁可以点击，谁不可以点击

即：better-scroll 是否必须加click: true,才能实现点击事件

分两种情况：1、button标签【蓝色下划线内容】 2、其它标签【绿色下划线内容】
在这里插入图片描述
These are bilibili-coderwhy老师Vue学习视频的 学习笔记~

小呀小萝卜儿
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue和better-scroll实现列表左右联动效果详解
10-17
【Vue和Better-Scroll实现列表左右联动效果详解】 在Web开发中，特别是在电商或信息展示类项目中，经常需要实现列表的联动效果，即当用户在一个列表中滚动时，另一个相关的列表也会相应滚动。Vue.js作为一款轻量级...
vue使用 better-scroll的参数和方法详解
08-28
3. `click`：如果设置为`true`，Better-Scroll将派发click事件。 4. `directionLockThreshold`：滑动方向锁定的阈值，当滑动距离小于这个值时，不改变滚动方向。 5. `momentum`：是否开启滑动惯性，`true`表示开启。...
钉钉微应用关于better-scroll在click设置为ture仍然出现点击无效的问题记录
凉茶冰
11-13 654
目录 问题描述 问题解决 解决方案 问题描述 开发了一个钉钉微应用，关于列表使用了better-scroll来实现下拉刷新上推加载更多，整体实现效果还是不错，参考这里。钉钉微应用分为手机端和PC端，项目中使用了同一套代码。测试的时候发现都正常，但是经过多次测试，发现一个问题： （1）偶尔会出现在PC端列表无法下来，而且点击也无效的情况。使用鼠标上下拖拽的时候不会响应相关事件，会出现把列表...
手机浏览器下better-scroll中click事件,链接无效的问题
dexing07的博客
03-08 3520
现在大多数vuejs . 项目都使用better-scroll但是大多数出现一个问题，就是在大的div里面的a 链接或者click事件都不用了这是 html 部分 <div ref="wrapper" class="list-wrapper"> <div class="setting-list" ref="setting" > <div class="setting-l
better-scroll插件初使用
llx18042693031的博客
02-03 3万+
模仿了一个饿了吗页面先上图，看一看better-scroll的效果 如果用overflow：auto或scroll属性，这样的页面就会出现两个滚动条，用户体验会有折扣，所以给介绍一款插件better-scroll，附上github资源链接。这款插件是基于iscroll插件做的重新封装，改善了一些bug，增加了一些拓展功能（插件作者并不是本人，望周知），有兴趣的小伙伴们可以自行下载体验体验。那么今天
vue使用 better-scroll的参数和方法
TionSu的博客
08-28 1万+
格式：let obj = new BScroll(object,{[option1,],.,.}); Options 参数 startX: 0 开始的X轴位置startY: 0 开始的Y轴位置scrollY: true 滚动方向为 Y 轴scrollX: true 滚动方向为 X 轴click: true 是否派发click事件，通常判断浏览器派发的click还是betterscr
解决better-scroll使真机测试浏览器click事件失效问题
二熊不是熊二的博客
03-16 834
今天在使用安卓真机测试时发现点击事件不生效，后来找到原因是因为better-scroll 默认会阻止浏览器的原生 click 事件。 better-srcoll官方文档： https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html#click 文档中介绍两个属性能帮助我们解决这个问题。 解决方法： 给bscroll...
vue2中引用及使用 better-scroll的方法详解
10-17
在Vue2中，引入并使用Better Scroll库可以帮助我们实现页面滚动效果，特别是在处理复杂的滚动交互时，如下拉刷新和上拉加载更多。本文将详细讲解如何在Vue2项目中集成Better Scroll，以及使用过程中需要注意的要点。...
Vue项目中使用better-scroll实现菜单映射功能方法
10-16
总的来说，实现Vue项目中`better-scroll`的菜单映射功能，关键在于监听菜单项的点击事件，滚动到对应位置，以及维护右侧菜品列表的高度信息。通过对`better-scroll`的配置和事件监听，我们可以轻松地为用户提供平滑...
vue滚动轴插件better-scroll使用详解
08-29
Vue 滚动轴插件 Better Scroll 使用详解 Better Scroll 是一个功能强大且灵活的 Vue 滚动轴插件，能够帮助开发者轻松实现滚动轴相关的功能。下面将详细介绍 Better Scroll 的使用方法和相关知识点。 一、Better ...
Vue根据条件添加click事件
weixin_34138139的博客
12-02 1万+
需求：根据特定条件，增加或者去掉click事件（例如：clickFlag == true时，添加click事件；clickFlag == false时，去掉click事件；） 解决方法： 方式一：在绑定事件中直接添加标示量clickFlag <div @click="clickFlag && addGoodsHandler()"> 添加产品 </div...
vue组件中click事件失效
酒馆不打烊
04-20 4174
使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候，点击事件失效，v-on:click、v-bind:click、@click.native都不行，试了一下@touchstart是却是可以的，发现better-scroll的配置中没有设置click：true，设置过之后click事件成功。 ...
vue中click事件不生效
edison lee的博客
03-01 2786
本来没打算写这个，因为之前发现click不生效可以使用touchstart去代替，可是后来发现使用了touchstart后不能在滑动了，其实可以滑动，但是使用click的目的是为了点击后跳转到首页，所以在刚刚准备滑动时，就被跳转到了首页。 于是乎，搜索了一下，发现问题在于使用了一个插件：better-scroll 只需要做如下配置即可 this.scroll=new BSc...
vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为
热门推荐
涂涂
01-18 15万+
其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown....... 以下click为例 注意：所有的v-on都可以简写为@，比如说v-click可以简写为@click 1.监听事件 可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。通常来讲就是
vue点击click事件解析
xuxinwen32的博客
12-28 9万+
vue算是前端技术比较火的一门技术了，所以在日常开发当中掌握它还是比较重要的，最近要用vue做一个移动端项目，趁着空闲的时间来简单的写一下demo，希望能够帮到大家： 废话不多说，先上代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;ti
vue的单击隐藏、双击出现事件:
gaoyangliu的博客
03-16 2万+
vue的显示隐藏: v-show=“true/false” 实例 script>     window.onload=function(){         new Vue({             el:'#box',             data:{ //数据                 a:true             }         });
在vue使disabled为true，click事件还能执行。
weixin_43955988的博客
04-29 3952
如果我用button标签disabled就能起到作用，但是如果用div，这个disable就无效了
vue开发移动端使用better-scroll时click事件失效
qq_39696861的博客
07-03 9347
最近使用vue学习开发移动端的项目，使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候，点击事件失效，v-on:click、v-bind:click、@click.native都不行，试了一下@touchstart是却是可以的，发现better-scroll的配置中没有设置click：true，设置过之后click事件成功。后来在使用vue...
vue-better-scroll 配置
最新发布
06-02
vue-better-scroll 是一个基于 better-scroll 封装的 Vue.js 组件，可以实现一些滚动场景的需求。下面是一些常用的配置： 1. 在组件中引入 better-scroll：`import BScroll from 'better-scroll'` 2. 在组件中创建 better-scroll 实例： ``` mounted() { this.$nextTick(() => { this.scroll = new BScroll(this.$refs.wrapper, { // 配置项 }) }) } ``` 3. 常用配置项： - `probeType`：默认为 0，不开启实时派发滚动事件。1 表示开启，会派发滚动事件，但是会有一定的性能损耗。2 表示在滚动过程中会实时派发滚动事件，性能损耗比较大。 - `click`：默认为 false，表示不监听 click 事件。如果需要监听 click 事件，可以设置为 true。 - `scrollX`：默认为 false，表示不开启横向滚动。如果需要横向滚动，可以设置为 true。 - `scrollY`：默认为 true，表示开启纵向滚动。如果不需要纵向滚动，可以设置为 false。 - `pullDownRefresh`：默认为 false，表示不开启下拉刷新。如果需要下拉刷新，可以设置为 true，并在组件中监听 `pullingDown` 事件。 4. 其他配置项可以参考 better-scroll 的官方文档：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小呀小萝卜儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值