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

　　常购清单的商品多了以后往上滑没有任何反应，不能滑动。但商城首页又可以往上滑。而且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. 
						
  2. action属性
		
    action属性 2013年7月8日 14:52 Path: action的访问路径,以"/"开头 Type: action的类型 Name: action使用的actionFor ...
    
		
    3. 
						
  3. 关于Windows Phone的资源文件Build Action属性
		
    最近一朋友问了一个问题,他想引用一个本地图片到页面上的Image控件,可是发现用Application的GetResourceStream得到的结果是个null值,当时第一个想到的就是他图片的Buil ...
    
		
    4. 
						
  4. ASP.NET查询页面设置form的action属性只弹出一个页面，并且每次将页面设置到最前
		
    原文:ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前 背景 当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的 ...
    
		
    5. 
						
  5. Touch 方法&属性 映射工具
		
    Touch 方法&属性 映射工具(0.5 版本) 标签 : github 线上后门与接口调试: 原先需要测试一个接口(如Dubbo.DAO), 或为线上留后门, 需要写大量的Web层(Api. ...
    
		
    6. 
						
  6. JavaScript动态修改html组件form的action属性
		
    用javaScript动态修改html组件form的action属性,可以在提交时再决定处理表单的页面. <%--JavaScript部分--%><script language=& ...
    
		
    7. 
						
  7. struts2在配置文件与JSP中用OGNL获取Action属性
		
    参考:Struts与OGNL结合 struts2在配置文件中可以调用Action的属性,在JSP页面也可以取出Action的属性值(前提是属性有get,set方法). 第一个例子: 1.Action中 ...
    
		
    8. 
						
  8. Action属性接收参数
		
    一.action的属性(地址栏传参)接收参数:如果使用的JDK属性不一致,则会使得传值无法实现.解决办法:1.系统自身需要用到的JDK(window——>属性——>Java——>In ...
    
		
    9. 
						
  9. form的action属性作用
		
    一.action=""和action="#".没有action属性的作用相同,都是提交到当前页面(也就是document.location.href) 二.ac ...
    
		
    10. 
						
  10. 使用Element的upload上传组件，不使用action属性上传
		
    1.需要实现的效果如下图,在点击提交的时候再提交file数据,和其他数据统一上传,我把file转换成了base64的格式,可以再上传之前显示缩略图 2.代码分析 action属性值为"#&q ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. python中并发编程基础1
			
    并发编程基础概念 1.进程. 什么是进程? 正在运行的程序就是进程.程序只是代码. 什么是多道? 多道技术: 1.空间上的复用(内存).将内存分为几个部分,每个部分放入一个程序,这样同一时间在内存中就 ...
    
			
    2. 
						
  2. 最适合入门的Laravel中级教程(二)用户认证
			
    之前的初级教程主要是学习简单的增删改查: 接着的中级教程的目标是在初级教程的基础上能写出更复杂更健壮的程序: 我们先来学习 laravel 的用户认证功能: 在现代网站中基本都有用户系统: 而我们每开 ...
    
			
    3. 
						
  3. js中遇到的一些方法和函数
			
    这是一个笔记文章,方便日后复习. 加号的优先级高于三目运算符: console.log(') ? 'define' : 'undefine');//define setTimeout(code,mil ...
    
			
    4. 
						
  4. m_sequencer、p_sequencer
			
    https://blog.csdn.net/zhajio/article/details/79608323 p - parent sequencer - 要处理的实际sequencer类型的句柄,这个 ...
    
			
    5. 
						
  5. java项目测试或者不使用request，如何获取webroot路径
			
    1.使用jdk中的方法,然后根据项目编译后的文件存在的位置,获取到classes目录,然后向上级查询获取String path = EngineTest.class.getResource(" ...
    
			
    6. 
						
  6. cmd中sudo以后显示password不能输入密码
			
    文本界面还是图形界面下输入密码都不会有回显,这是为了安全考虑. 其实你不是不能输入密码只是你看不到而已,事实上你已经输入进去了,回车后就能看到效果了. 来源于:https://zhidao.baidu ...
    
			
    7. 
						
  7. C/S和B/S架构
			
    1.C/S架构(Client/Server结构,熟知的客户机和服务器结构),它是软件系统体系结构,通过它可以充分利用两端硬件环境的优势,将任务合理分配到Client端和Server端来实现,降低了系统 ...
    
			
    8. 
						
  8. 关于TP5.0搜索后分页
			
    使用$Model->where($where)->paginate($page,$count);的时候如果点击下一页会出现条件重置问题,经过测试可以使用Db::name('data') - ...
    
			
    9. 
						
  9. Mybatis配置问题解决Invalid bound statement (not found)
			
    首先这个异常的原因是系统根据Mapper类的方法名找不到对应的映射文件. 网上也搜索了到了类似的文章,一般可以从以下几个点排查: mapper.xml的namespace要写所映射接口的全称类名,而且 ...
    
			
    10. 
						
  10. js  string to date
			
    Date.prototype.pattern=function(fmt) { //alert(this.getFullYear()); fmt=fmt.toUpperCase(); var o = { ...
    
			
    11.