首页 > 其他分享 >uniapp滑动页面时警告Unable to preventDefault inside passive event listener due to target being treated as p

uniapp滑动页面时警告Unable to preventDefault inside passive event listener due to target being treated as p

时间:2023-12-08 10:36:05浏览次数:45  
标签:uniapp touchstart 浏览器 target preventDefault passive false 页面

翻译:没有添加被动事件监听器来阻止’touchstart‘事件,请考虑添加事件管理者’passive’,以使页面更加流畅。

原因:

  • 由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault(),这就导致了浏览器不能及时响应滚动,略有延迟。
  • 所以为了让页面滚动的效果如丝般顺滑,从 chrome56 开始,在 window、document 和 body 上注册的touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。

解决方法:

1、
在touch的事件监听方法上绑定第三个参数{ passive: false }, 通过传递 passive 为 false 来明确告诉浏览器:事件处理程序调用 preventDefault 来阻止默认滑动行为。 element.addEventListener('touchstart',function () {},{ passive: false });

2、// 使用全局样式样式去掉
* { touch-action: pan-y; }

个人认为第二种解决方案比较简单且实用 

 

标签:uniapp,touchstart,浏览器,target,preventDefault,passive,false,页面
From: https://www.cnblogs.com/linboomboom/p/17884610.html

相关文章

  • 【UniApp】-uni-app-全局数据和局部数据
    前言好,经过上个章节的介绍完毕之后,了解了一下uni-app-全局样式和局部样式那么了解完了全局样式和局部样式之后,这篇文章我再来给大家介绍一下UniApp中全局数据和局部数据搭建演示环境创建一个全新的项目:然后在配置一下,微信小程序的AppId,直接去之前的项目中拷贝一下即......
  • 【UniApp】-uni-app概述
    前言好,经过我们前面文章的编写,大家可以了解到微信小程序开发相关的知识,了解完了这个微信小程序开发和云开发之后,从这篇文章开始,我再来给大家写一下关于Uniapp的知识。好,开始,那什么是Uniapp呢?这个时候我们不管三七二十一,先打开我们Uniapp官方文档,它官方地址也很简单,叫做d......
  • 【Nginx/IIS】解决uniapp/Vue history模式下页面刷新404
    uniapp/Vue开启History模式本地开发:二级页面刷新或者通过链接进入二级页面是正常的打包部署后:二级页面刷新或者通过链接进入二级页面会报错404页面找不到 解决方案:Nginx配置:在nginx.conf的对应location里配置一行代码try_files$uri$uri//index.html;location/h5{......
  • uniapp 配置 基座调试指定页面
    在用hbuildx时,用自定义基座,调试程序时,有的页面因为基座缺少组件而进不去,这个时候就可以用指定页面的方式,我们只需要把进入页面的入参传进去,这个时候打开页面就是指定要调试的页面了。就在page.json文件最后加入"condition":{//模式配置,仅开发期间生效"current":0......
  • uniapp 图片懒加载的一种方式
    如果是列表页,可以采用前端分页,通过scroll-view下拉,在绑定图片地址信息,这样就能下拉部分,加载部分图片了。pageQuery(){letcurrentPage=this.pQuery.page;letpageSize=this.pQuery.size;constindex=(......
  • uniapp---wap2app去掉系统自带的导航栏
    在用uniapp进行将wap站转化为app的时候,默认打包后的文件,带有系统的导航栏,下面是去除的办法:第一步:找到sitemap.json 设置titleNView为false: 第二步:在pages加入{"webviewId":"common","matchUrls":[{"hostname":"R:.*","pa......
  • uniapp之合并行表格
    前言此文旨在记录微信小程序中需要使用合并表头的需求场景,由于此项目使用的是Uniapp和uView这两个UI框架。然后接到一个需要查成绩的需求,表头大概长这样:碰到问题然后我惊奇的发现uniapp的table组件压根没有封装tr和td的rowspan属性,uView更是直接没有table组件。......
  • 关于uniapp打包APP自定义基座调试,遇到首页同意网络权限后白屏问题
    解决方案:1、在App.vue文件中,onShow生命周期内添加一段代码,检测是否同意使用互联网权限:uni.onNetworkStatusChange(function(res){ console.log('onNetworkStatusChange',res); if(res.isConnected){ setTimeout(()=>{ uni.reLaunch({ url:'/pages/......
  • uniapp tabbar权限问题
    在app.vue里添加:exportdefault{//在此处添加一个函数globalData:{//更改tabbar权限reviseTabbarByUserType:function(){//可以写自己的逻辑代码//letusername=uni.getStorageSync('login_user_......
  • ant 想在一个target里根据参数是不是为true 去决定是否调用另一个target
    我起初是想解决同一个tomcat下运行两个相同项目的问题,这个需要web.xml里的webAppRootKey进行区分。一个为webApp.root,另一个则改为xxx.root但是需要在编译前就改为,否则运行报错<targetname="init"depends="clean"description="初始化">......<echo>初始化工作结......