最近在做微信项目的时候遇到一个奇怪的问题:

  常购清单的商品多了以后往上滑没有任何反应,不能滑动。但商城首页又可以往上滑。而且ios没有这个问题,安卓才有这个问题。

  起初我以为是因为这2个页面调用接口循环加载出商品的方法不同导致的。商城首页的商品部分是用laytpl模板写的;常购清单商品部分是拼的字符串。

  结果就是不管是模板写的还是拼的字符串,安卓都不能往上滑动,ios可以。

  我以为是ios和安卓的兼容性问题,后来发现是在css文件里加了touch-action:none; 这句代码,只要把这句代码去掉就可以了。

  

   解决方法:去掉这句代码——touch-action:none; (这句代码的意思是:禁止触发默认的手势操作

   至于为什么要加这句代码,是因为使用滚动时候,新版google浏览器,会弹出如下的警告。

  

  解决办法就是加上这句代码: touch-action: none;  然后就测试了下,可以解决这个问题。后来忘记删除了,更没想到之后会出现上述问题,被自己坑了一次,哈哈

  这个错相当于是一个警告,没有什么影响。当时出于好奇,想知道这个警告是什么,怎样把这个警告去掉,后来没想到加了touch-action:none;这句代码会造成上述问题

  原文博客链接

    更多touch-action属性用法

  

  补充:

  因为看到有小伙伴评论说是因为我监听的元素有passive: true属性,调用preventDefault()失败

  然后专门去查了Passive Event Listeners属性(这个新特性是为解决滚动和触摸事件的卡顿而发明的)

   详情:https://juejin.im/post/5ad804c1f265da504547fe68


  

  

touch-action属性引起的探索的更多相关文章

  1. struts之动态方法调用改变表单action属性

      一.动态方法调用(DMI:Dynamic Method Invocation) ⒈struts2中同样提供了这个包含多个逻辑业处理的Action,这样就可以在一个Action中进行多个业务逻辑处理 ...

  2. action属性

    action属性 2013年7月8日 14:52 Path: action的访问路径,以"/"开头 Type: action的类型 Name: action使用的actionFor ...

  3. 关于Windows Phone的资源文件Build Action属性

    最近一朋友问了一个问题,他想引用一个本地图片到页面上的Image控件,可是发现用Application的GetResourceStream得到的结果是个null值,当时第一个想到的就是他图片的Buil ...

  4. ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前

    原文:ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前 背景 当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的 ...

  5. Touch 方法&属性 映射工具

    Touch 方法&属性 映射工具(0.5 版本) 标签 : github 线上后门与接口调试: 原先需要测试一个接口(如Dubbo.DAO), 或为线上留后门, 需要写大量的Web层(Api. ...

  6. JavaScript动态修改html组件form的action属性

    用javaScript动态修改html组件form的action属性,可以在提交时再决定处理表单的页面. <%--JavaScript部分--%><script language=& ...

  7. struts2在配置文件与JSP中用OGNL获取Action属性

    参考:Struts与OGNL结合 struts2在配置文件中可以调用Action的属性,在JSP页面也可以取出Action的属性值(前提是属性有get,set方法). 第一个例子: 1.Action中 ...

  8. Action属性接收参数

    一.action的属性(地址栏传参)接收参数:如果使用的JDK属性不一致,则会使得传值无法实现.解决办法:1.系统自身需要用到的JDK(window——>属性——>Java——>In ...

  9. form的action属性作用

    一.action=""和action="#".没有action属性的作用相同,都是提交到当前页面(也就是document.location.href) 二.ac ...

  10. 使用Element的upload上传组件,不使用action属性上传

    1.需要实现的效果如下图,在点击提交的时候再提交file数据,和其他数据统一上传,我把file转换成了base64的格式,可以再上传之前显示缩略图 2.代码分析 action属性值为"#&q ...

随机推荐

  1. 剑指offer例题——链表中倒数第K个结点

    题目描述 输入一个链表,输出该链表中倒数第k个结点. 编程过程 此处采用两个指针依次后移的方法来求解,首先,用一个指针移到第k个位置,之后将第二个指针放在第一位,与第二个指针一同移动,当第二个指针移动 ...

  2. Redux使用教程

    在开始之前,需要安装环境,node.js可以使用npm管理包,开发的工具webstorm可以创建相应的项目. 项目中redux是管理全局的同一个store,React-router是管理路由的,这里只 ...

  3. php 计算 距离

    function getdistance($lng1,$lat1,$lng2,$lat2){ //将角度转为狐度 $radLat1=deg2rad($lat1);//deg2rad()函数将角度转换为 ...

  4. 相机标定——OpenCV-Python Tutorials

    原文地址http://opencv-python-tutroals.readthedocs.io/en/latest/py_tutorials/py_calib3d/py_calibration/py ...

  5. RFID数据清洗与数据清洗的区别

    RFID数据清洗和一般数据清洗的不同: RFID数据清洗已经跨越到硬件范畴!造成脏数据的原因是硬件原理和硬件所处环境本身!要提高RFID数据清洗能力,就必须同时研究技术原理和环境本身之间的互动关系,而 ...

  6. swift 监测内存泄漏 MLeaksFinder

    使用MLeaksFinder检测项目内存泄露总结 https://www.cnblogs.com/ocarol/p/5288497.html

  7. VC 中引用js文件

    #include "comutil.h" using namespace MSScriptControl; #include <MsHTML.h> #include & ...

  8. Java之IO流总结

    IO流·Java流式输入/输出原理·Java流类的分类·输入/输出流类·常见的节点流和处理流·文件流·缓冲流·转换流·数据流·Print流·Object流 ①Java流式输入/输出原理         ...

  9. service 设计问题

    今天写了一段让自己尴尬的代码,就是在一个方法中调用了两个 service 方法,而我为每个service 都定义了 事物回滚. 然后郁闷了,我执行请求调用该方法, 发现第二个service方法执行失败 ...

  10. CentOS查找目录或文件

    查找目录:find /(查找范围) -name '查找关键字' -type d查找文件:find /(查找范围) -name 查找关键字 -print 如果需要更进一步的了解,可以参看Linux的命令 ...