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

所属分类: 网络编程 / JavaScript 阅读数: 1254
收藏 0 赞 0 分享

因为项目中有个填写信息的页面,有很多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目录下引用了

在这里插入图片描述

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

在这里插入图片描述

更多精彩内容其他人还在看

纯javascript判断查询日期是否为有效日期

很多网站都涉及到输入日期选项,如果客户日期输入错误,可能导入查询不到甚至查询到错误的信息,为了更好的满足用户需求,需要对日期进行校验,下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery实现的蓝色二级导航条效果代码

这篇文章主要介绍了jquery实现的蓝色二级导航条效果代码,涉及jquery鼠标事件及页面样式的动态切换效果实现技巧,非常简单实用,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax如何实现页面局部跳转与结果返回

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,本篇文章给大家介绍ajax如何实现页面局部跳转与结果返
收藏 0 赞 0 分享

jQuery实现的类似淘宝网站搜索框样式代码分享

这篇文章主要介绍了类似淘宝网站搜索框样式实现代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

js实现的黑背景灰色二级导航菜单效果代码

这篇文章主要介绍了js实现的黑背景灰色二级导航菜单效果代码,涉及javascript操作页面元素动态切换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery仿360导航页图标拖动排序效果代码分享

这篇文章主要为大家详细介绍了360导航页图标拖动排序效果代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript中SetInterval与setTimeout的定时器用法

Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等,本文文章通过代码示例给大家介绍javascript中SetInterval与setT
收藏 0 赞 0 分享

jquery带下拉菜单和焦点图代码分享

这篇文章主要介绍了jquery带下拉菜单和焦点图代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

jQuery实现的背景动态变化导航菜单效果

这篇文章主要介绍了jQuery实现的背景动态变化导航菜单效果,涉及jquery页面元素背景动态变换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery+CSS实现的水平布局多级网页菜单效果

这篇文章主要介绍了jquery+CSS实现的水平布局多级网页菜单效果,涉及jquery页面元素属性动态变换效果实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多