使用Vue-scroller页面input框不能触发滑动的问题及解决方法


Posted in Javascript onAugust 08, 2020

因为项目中有个填写信息的页面,有很多input框,引入vue-scroller后发现在input区域滑动失效;看了一下引入的vue-scroller组件里的源码,发现在组件源码里的Scroller.vue中在touchStart、touchMove和mouseDownd方法的时候被return了

touchStart(e) {
   // Don't react if initial down happens on a form element
   //注释掉这段代码就行
   // if (e.target.tagName.match(/input|textarea|select/i)) {
   //  return
   // }
   //注释掉这段代码就行
   if (e.target.tagName.match(/textarea|select/i)) {
    return;
   }
   this.scroller.doTouchStart(e.touches, e.timeStamp);
  },
   touchMove(e) {
   //touchMove也要重新加个判断,否则input框不能左右滑动
   if (!e.target.tagName.match(/input/i)) {
    e.preventDefault();
   }
   this.scroller.doTouchMove(e.touches, e.timeStamp);
  },

  mouseDown(e) {
   // Don't react if initial down happens on a form element
   //注释掉这段代码就行
   // if (e.target.tagName.match(/input|textarea|select/i)) {
   //  return
   // }
   //注释掉这段代码就行
   if (e.target.tagName.match(/textarea|select/i)) {
    return;
   }
   this.scroller.doTouchStart(
    [
     {
      pageX: e.pageX,
      pageY: e.pageY
     }
    ],
    e.timeStamp
   );
   this.mousedown = true;
  },

具体我也不知道阻止滑动input框区域是为了防止什么Bug,有知道的可以在评论区说一下;最后因为vue-scroller是npm引入的方式,怕会被更新掉,所以直接把组件代码copy出来放在项目的components目录下引用了

使用Vue-scroller页面input框不能触发滑动的问题及解决方法

main.js引入方式和插件类似,使用方式和官方一样

使用Vue-scroller页面input框不能触发滑动的问题及解决方法

到此这篇关于使用Vue-scroller页面input框不能触发滑动的问题及解决方法的文章就介绍到这了,更多相关Vue-scroller页面input框不能触发滑动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
js图片预加载示例
Apr 30 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 #Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 #Javascript
javascript中正则表达式语法详解
Aug 07 #Javascript
vue 子组件修改data或调用操作
Aug 07 #Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 #Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 #Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 #Javascript
You might like
PHP脚本的10个技巧(4)
2006/10/09 PHP
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP递归的三种常用方式
2019/02/28 PHP
js href的用法
2010/05/13 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
深入理解Node module模块
2018/03/26 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Python获取网页上图片下载地址的方法
2015/03/11 Python
python中的代码编码格式转换问题
2015/06/10 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
python调用API实现智能回复机器人
2018/04/10 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
python实现五子棋程序
2020/04/24 Python
如何在sublime编辑器中安装python
2020/05/20 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
运行Python编写的程序方法实例
2020/10/21 Python
中层干部岗位职责
2013/12/18 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
学生鉴定评语大全
2014/05/05 职场文书
设计大赛策划方案
2014/06/13 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书