定兴网站建设,ps软件是干什么用的,浙江工程信息网,网络推广渠道都有哪些目录
如图所示控制台出现报错#xff1a;
原因#xff1a;
touch-action 介绍#xff1a;
解决方案#xff1a;
1.手动设置touch-action#xff1a; 2.使用条件渲染#xff1a;
3.CSS样式隔离#xff1a;
4.浏览器兼容性#xff1a;
5. 忽略警告 如图所示控制台…目录
如图所示控制台出现报错
原因
touch-action 介绍
解决方案
1.手动设置touch-action 2.使用条件渲染
3.CSS样式隔离
4.浏览器兼容性
5. 忽略警告 如图所示控制台出现报错 报错定位本人在这个页面引入了一个组件而那个组件是需要进行拖拽或者滑动之类的操作在此之前没有出现报错的应该就是这里的问题。
这应该与浏览器尝试优化滚动性能或触摸事件的处理有关他报错的意思是需要我们再在css中添加一个css属性。
原因 第三方库或框架有些第三方库如滑动库、拖拽库等可能会自动给元素添加touch-action: none;以防止默认的滚动行为干扰其自定义的滑动或拖拽逻辑。 浏览器优化现代浏览器会尝试预测用户的意图以提高页面的响应性和滚动性能。当浏览器检测到元素可能阻止默认滚动行为时它可能会发出警告。 touch-action 介绍 touch-action CSS属性是用来指定一个区域例如一个按钮或整个页面是否以及如何响应触摸事件如滑动或缩放的。 最常见的用法是禁用元素及其不可滚动的后代上的所有手势以使用自己提供的拖放和缩放行为如地图或游戏表面。 #map {touch-action: none;
}另一种常见的模式是使用指针事件处理水平平移的图像轮播但不想干扰网页的垂直滚动或缩放。 .image-carousel {width: 100%;height: 150px;touch-action: pan-y pinch-zoom;
}触摸动作也经常用于完全解决由支持双击缩放手势引起的点击事件的延迟。 html {touch-action: manipulation;
} 解决方案
1.手动设置touch-action
使用一个div盒子包裹你的组件并在标签上添加 touch-action: none。
我是这样解决的报错信息让你加你就加呗添加行内也行看自己啦
template div classmy_component !-- 组件内容 -- /div
/template
.my_component { touch-action: none; /* 只在需要的元素上设置 */
} 2.使用条件渲染
如果touch-action: none;是在特定条件下需要的考虑使用Vue的条件渲染如v-if来动态添加或移除这个样式。
:styletouch-action:${setTouch?auto:none} ;
3.CSS样式隔离 确保你的CSS样式不会意外地影响到不应该影响的元素。使用更具体的选择器来定位需要这个属性的元素。同时在当前页面添加scoped使当前页面的css样式独立
style scoped
4.浏览器兼容性
浏览器是否支持touch-action属性。(见下图 5. 忽略警告 如果这个警告不影响你的应用的功能或性能你可以选择直接忽略它。然而最好是解决潜在的问题以确保应用的最佳性能和用户体验。 结束啦
