解决uView2.0 Picker 选择器 (u-datetime-picker) 背景滚动，页面穿透的问题

最新推荐文章于 2024-06-07 10:05:45 发布

原创最新推荐文章于 2024-06-07 10:05:45 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #html #javascript

收录于

javascript 同时被 3 个专栏收录

92 篇文章

订阅专栏

vue

88 篇文章

订阅专栏

wx小程序

31 篇文章

订阅专栏

这篇博客介绍了如何在Vue组件的父级元素上阻止默认的touchmove事件，使用`@touchmove.stop.prevent`修饰符来实现。示例中展示了在<view>组件内包含一个<u-datetime-picker>，通过事件绑定防止触摸移动事件的默认行为。

在组件的父级元素修改默认的事件
@touchmove.stop.prevent=“() => { }”

<view @touchmove.stop.prevent="() => { }">
	<u-datetime-picker :show="isOpenDateHMS" @cancel="isOpenDateHMS = false" :minDate="getMillisecond()"
		@confirm="closeDateHMS" mode="datetime">
	</u-datetime-picker>
</view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

A 风

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue 弹框产生的滚动穿透问题的解决

01-21

最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。首先定义一个全局样式： .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件，定义几个方法： export function hasClass(el, className) { let reg = new RegExp('(^|\\s)' + className + '(\\s|$)') return reg.test(el

参与评论您还未登录，请先登录后发表或查看评论

解决移动端滚动穿透问题

05-31

移动端当弹出遮罩层滚动时，底部禁止滚动，完美解决穿透问题

uniapp uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。

热门推荐

qq_43807473的博客

05-10

3万+

uniapp uview使用u-popup组件当开启遮罩层禁止下层页面跟着滚动。 uniapp 弹框禁止页面上下滚动

uniapp H5的弹窗滚动穿透解决(uni-data-picker组件的滚动穿透)

peachban的博客

11-09

3450

滚动穿透即：移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动。默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。

解决支付宝小程序uview组件u-popup遮罩滚动穿透问题

StayInCat的博客

04-19

5917

uni-app、u-popup、遮罩滚动穿透

解决uView2.0 Picker 选择器 (u-datetime-picker) 背景滚动，页面穿透滚动的问题

c05011510的博客

06-07

1022

需要在 data 中定义一个变量，用来表示。的开启关闭状态，并通过这个变量修改。的开启关闭状态，并赋值给上面的变量。组件动态修改页面样式，

【滚动穿透】解决uview弹出层滚动穿透问题

qq_34093387的博客

04-12

1153

组件举例，找到u-popup根元素，在view加上事件。在组件父级元素增加事件。

【Vue2.0】mint-ui解决datetime-picker穿透滚动问题

qq_26780317的博客

09-15

750

背景：在移动端开发中，使用了mint-ui组件库，其中，使用组件popup组件和datetime-picker组件存在滚动性穿透问题。一、问题原因 HTML5触摸事件touchmove事件：当手指在屏幕上滑动的时候会连续触发；所以，当激发出组件popup组件和datetime-picker的弹出层时，我们在弹出层选择内容时，上下连续滑动是会触发该事件的。二、解决思路在弹出层出现之后阻止body的touchmove事件，在弹出层消失之后，移除阻止事件。三、例外然而，Date...

vue-解决弹出蒙层滑动穿透问题

asdfgh0077的博客

09-26

308

vue-解决弹出蒙层滑动穿透问题

vue弹层滑动穿透问题简单解决方案

weixin_38002190的博客

07-26

597

vue弹层滑动穿透问题简单解决方

uniapp H5遮罩层，弹窗，蒙层滚动穿透/滑动穿透

weixin_45368519的博客

03-24

5254

近期项目用到了uniapp + uview 就出现了很多奇怪的问题，滚动穿透问题更是奇怪且多发。不论是弹窗，蒙层，遮罩，或者普通的元素置顶都会出现，也是解决了很久，特地记录一下

datetime-picker事件穿透问题解决一劳永逸

web_xiaolei的博客

10-25

1239

最近在使用mint-ui做移动端H5开发，遇到个特别恶心的问题：页面超一屏的时候，ios的datetime-picker在滑动的时候联动到底层一起滚动，网上说的禁止touchMove事件尝试了并不管用。最后的解决办法如下： 1、datetime-picker改用popup加picker替换 2、当popup显示的时候给body加个class。class加 pointer-events: none;...

uniapp弹窗之后禁止页面滑动

weixin_52941842的博客

05-31

5726

uniapp弹窗之后禁止页面滑动

h5 vue解决弹窗滑动穿透问题

为啥不能换名字的博客

09-10

685

1.在mian.js中引入prototype.js import Vue from 'vue'; //弹出框禁止滑动 Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面滑动

VUE实现网页中滚动鼠标时导航背景颜色透明度的改变

qq_30228701的博客

11-30

3336

1、HTML <div id="topNav" :style="topNavBg"> 这里是导航内容 </div> 2、JS export default { data () { return { topNavBg: { backgroundColor: '' } } }, mounted () { window.addEventListener('scroll', this.handleScroll) // 监听

vue阻止弹窗_vue 弹窗禁止底层滚动

weixin_39831902的博客

12-22

267

原因：底层视图高度超出百分百，加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层。处理：打开弹窗后禁止底层滚动调用stop事件，关闭则开启底层滚动调用move事件。let mo=function(e){e.preventDefault();};stop(){document.body.style.overflow='hidden';document.body.style.positio...