vant的popup、Datetimepicker控件滚动穿透

最新推荐文章于 2024-05-22 11:26:23 发布
最新推荐文章于 2024-05-22 11:26:23 发布
阅读量7.1k 收藏 2
点赞数 1
分类专栏： vue 文章标签： vant 滚动穿透

今天一边改bug一边测试发现，vant的popup跟DatetimePicker会出现滚动穿透。

解决办法：使用preventDefault阻止body的touchmove事件。

方法1

方法2

在全局注册v-roll指令，结合timeDatePicker使用（如第二图）。bodyVisible初始状态为false，在弹层打开时改变，弹层点击确认跟取消时也需要改变！

解决办法源于另一个作者的，附上对方的文章链接（他用的是Mint-ui，但是框架这种东西，大同小异吧，东西都差不多，遇到的问题，很多解决办法都可以相通）

https://blog.csdn.net/u012374026/article/details/83822231

贼猫子
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
01-18
在移动端开发中使用到了Mint-ui组件库，其中有两个组件Popup组件和Datetime Picker存在滚动性穿透问题，官方文档最新版并没有解决这个问题。 现象还原 官方地址 手机扫码查看demo，查看两个组件Popup组件和Datetime...
使用vant的地域控件追加全部选项
01-21
在项目中使用了vant的Area插件，需要进行全部匹配，vant本身没有实现，需要改造代码，方法如下： 起点 (0)> 终点 (1)> <van-popup v-model=show positio
Vant Popup 弹出层组件穿透问题
weixin_43339946的博客
01-28 4675
关于 VantPopup 弹出层组件 在微信小程序上穿透的问题， 目前想到的方法是通过js控制 最外层组件的样式来解决Popup 弹出层穿透的问题 逻辑思路 利用 show 判断 控制最外层组件的样式 如 show 为 true style 就为 overflow:hidden;height:100vh; 为false 就为 ‘’ <viewstyle="{{show?'height:100vh;overflow:hidden;':''}}"cl...
关于vant组件ActionSheet事件穿透的问题以及解决方案
weixin_40618068的博客
06-28 7041
关于vant的一些组件我真的不想吐槽了，例如动作面板actionSheet这个组件，在弹出层点击之后居然都是事件穿透…，我这里贴一个例子吧，这是我在公司负责的一个h5项目，点击评价时会显示动作面板，如下：(这是一个工单列表，点击红色框框内除了按钮位置都会跳转到工单详情页) 此时我点击评价，弹出actionSheet动作面板 如果此时有需求是点击遮罩层隐藏动作面板，那么问题就来了，如果遮罩层后有点击事件，那么会发生事件穿透，在这个例子即是我点击遮罩层就直接进入到工单详情页了，这显然不合理。（更坑的是…点击
vant-DatetimePicker 时间选择的使用
最新发布
aaa123aaasqw的博客
05-22 1106
2,在UserEdit.vue页面使用, 定义相关变量。3,点击单元格, 弹出时间选择组件。4,绑定事件, 实现功能。
vant 滚动穿透问题
qq_38110067的博客
10-07 1217
vue vant 滚动穿透问题
解决支付宝小程序uview组件u-popup遮罩滚动穿透问题
StayInCat的博客
04-19 4370
uni-app、u-popup、遮罩滚动穿透
微信小程序弹窗底部不滚动-穿透
qq_46199553的博客
10-26 1397
微信小程序穿透
vue中修改elementUI,vant 样式(样式穿透的三种方法)
m0_58565372的博客
05-26 1550
在vue项目中，当我们在使用第三方组件库（element-ui、vant）时，遇到需要修改组件中第三方组件库中的样式，但同时又不想去除scoped属性造成组件之间的样式覆盖，这个时候，就可以使用样式穿透来解决这个问题。 1，使用>>> <style scoped> >>>第三方组件类名 { 样式 } </style> 当Sass、Less之类的预处理器无法解析>>>，可以使用/deep/或者::v-deep 2./d
使用Vant完成DatetimePicker 日期的选择器操作
01-21
效果展示： 代码展示： ()>点击选择日期 选择的日期结果> <van-datetime-picker v-model=c
解决VantUI popup 弹窗不弹出或无蒙层的问题
01-18
把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van v-model=popup1show position=bottom overlay=true click-overlay=clickOverlay> <van-datetime-picker show-toolbar :title=...
在Vant的基础上封装下拉日期控件的代码示例
10-17
主要介绍了在Vant的基础上封装下拉日期控件的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VantUI中van-overlay组件内部溢出内容不可滑动
Wyatto137的博客
08-15 1151
解决van-overlay内部内容无法滑动问题
vue-解决弹出蒙层滑动穿透问题
西门吹雪
11-22 8267
vue-解决弹出蒙层滑动穿透问题 遇到的问题】 在一个可滑动列表页弹出一个全屏蒙层，蒙层固定，中间一块显示消息框，当用手滑动蒙层空白处时，滑动事件会穿透到底部列表页，导致列表页的滑动。 【要实现的目标】 1. 滑动蒙层空白处不让滑动事件穿透。 2. 当蒙层消息框文字多时，要让文字可上下滑动。 　 【实现思路】 1. vue提供的 @touchmove.prevent 可以用来阻止滑动，但是这个方法会对其内的子div的滑动事件也禁止掉了，这样会导致中间文字无法滑动。如果没有中间滑动需求，用 @touchmov
vue中使用mint-ui的mt-popup出现滚动穿透问题解决方法
alize的博客
07-30 3167
防止滚动穿透 只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件 <mt-popup v-model="popupSCVisible" position="bottom" model="true" closeOnClickModal="true" @touchmove.native.sto...
vue 弹框产生的滚动穿透问题
dianqi0560的博客
12-18 523
首先定义一个全局样式： .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件，定义几个方法： export function hasClass(el, className) { let reg = new RegExp('(^|\\s)' + class...
Vant源码解析(四)----Popup弹出层，详解样式方法
我的博客
07-19 8628
这个功能，自己也手写过，毕竟有很多弹窗的嘛。我自己写就是：一个背景层，然后一个盒子里面放内容。再写个显示隐藏事件。够够的了。
Vue中样式穿透共6种方法（Vue2、Vue3样式穿透，避免踩坑）
热门推荐
weixin_46022934的博客
04-06 2万+
1.vue2的css样式穿透: >>> 2.vue3的css样式穿透： :deep()和::v-deep() 3.关于less和sass的css样式穿透： /deep/ ::v-deep 4.关于 important 解决样式的使用方法
彻底解决背景跟随弹窗滚动问题
青天诀的专栏
06-20 2083
背景 在移动端使用弹窗时，我们会经常遇到这种现象：滑动弹窗时，遮罩层下面的背景（body）也会跟随滑动，带来的用户观感体验很差。 市面上的解决方案大部分通过阻止touchmove默认事件执行event.preventDefault()解决，但是这种方案存在兼容性，不能对所有浏览器都有效，而且如果弹窗本身存在滚动（如活动规则弹窗），这种解决方案并不能阻止背景滑动，如下图活动规则弹窗所示： 终极解决方案 先上代码，超级简短 // 展示弹窗时，阻止背景滚动 function stopScroll () {
vant2 datetimepicker处理时间
09-05
vant2 datetimepicker 是一个用于处理时间选择的组件。它可以让用户在移动设备或者电脑上方便地选择日期和时间。 vant2 datetimepicker 的使用非常简单。首先，你需要在你的项目中安装 vant2 组件库，并引入 datetimepicker 组件。然后，在需要使用时间选择功能的地方，直接使用 `<van-datetime-picker>` 标签即可。你可以通过给该组件的属性传递不同的值来定制时间选择器的外观和功能。 vant2 datetimepicker 提供了多种属性可以进行配置。例如，你可以通过 `value` 属性设置选择框的默认值，通过 `type` 属性设置选择器的类型，可以选择只选择日期、只选择时间，或者同时选择日期和时间。你还可以通过 `min-date` 和 `max-date` 属性设置选择器的可选范围。此外，在选择日期的时候，你可以使用 `formatter` 属性自定义日期的展示格式。 vant2 datetimeicker 还提供了一些事件供你处理时间选择的逻辑。例如，你可以通过 `@confirm` 事件获取用户选择的时间，并进行后续的处理。你还可以通过 `@cancel` 事件，在用户取消选择的时候执行相应的操作。 总的来说，vant2 datetimepicker 是一个功能强大、灵活易用的时间选择组件。它可以帮助你方便地处理时间选择的需求，并提供丰富的配置选项和事件，以满足不同的使用场景。无论是在移动设备还是电脑上，vant2 datetimepicker 都能为用户提供良好的交互体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值