使用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 相关文章推荐
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
Javascript实现关闭广告效果
Jan 29 Javascript
微信小程序完美解决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冒泡排序与快速排序实例详解
2015/12/07 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
python采集百度百科的方法
2015/06/05 Python
python基础教程之匿名函数lambda
2017/01/17 Python
Python类继承和多态原理解析
2020/02/05 Python
Numpy 多维数据数组的实现
2020/06/18 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
学生干部学习的自我评价
2014/02/18 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
实习科室评语
2015/01/04 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
用Python selenium实现淘宝抢单机器人
2021/06/18 Python