Vant组件中van-overlay页面太长无法滚动

于 2024-03-06 17:36:02 发布
阅读量585 收藏 10
点赞数 7
分类专栏： Vant 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56715703/article/details/136510367
版权

内容太长，发现电脑中滚轮可以滚动，但是手机端手指滑动动不了。

在组件上加lock-scroll

<van-overlay :lock-scroll="false">

默认为true

注：我使用的版本是4.8.5，据说2版本不生效。

三月.'
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vant踩坑2——Overlay 遮罩层组件
weixin_47546788的博客
01-19 3344
问题：现有需求是一个页面，点击弹出一个遮罩层，并可以上下滚动，在chrome调试时，能上下滚动，但是在真机上不能滑动 解决方法： 将overlay遮罩层的lock-scroll属性默认设置为false。 官方说明是：overlay锁定背景滚动，锁定时蒙层里的内容也将无法滚动 <van-overlay :show="showDetail" :lock-scroll="false"> 来源参考：使用vant的Overlay 遮罩层做弹框，遇到的bug ...
VantUI中van-overlay组件内部溢出内容不可滑动
最新发布
Wyatto137的博客
08-15 1125
解决van-overlay内部内容无法滑动问题
vantUI组件vant-overlay组件使用时移动端不能滑动问题全纪录
Dysons的专栏
07-06 6794
移动端前端项目开发中一直使用的是vantUI，在这次的项目中遇到了vant-overlay组件中的内容不能滑动，在PC端用鼠标不能拖动 只能滚轮滑动，开始以为是我的样式或者js出现了问题，检查下来并不存在问题，后台突发灵感想着不用这个组件试一下，果然是这个vant-overlay的问题，于是弃用了，自己写了个遮罩组件用起来，不知道有没有人遇到这个问题，欢迎告知除了我这个还有没有其他的解决办法，感谢~~~ 相关:vantUI, Vue ...
vant 自定义遮罩层van-overlay时局部滚动
YY_WYG的博客
07-08 1948
vant 自定义遮罩层van-overlay时局部滚动，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为，体验甚是不好 设置:lock-scroll="false"时，规则里面的滑块才会滚动，overflow-y才会生效---->这是个坑 上代码新建utils/modalHelper.js文件...
van-overlay 局部展示
龙丨行的博客
01-07 1325
van-overlay 局部展示
vant避坑之---------overlay弹出层只可滚动不可滑动
niceday的博客
09-22 863
css 只可滚动不可滑动
vant 自定义 van-dropdown-item的用法
10-15
在移动应用开发中，Vant UI 是一款流行的组件库，它为 Vue.js 应用提供了丰富的 UI 元素和交互设计。本文将详细介绍如何自定义 Vant 的 `van-dropdown-item` 组件，以满足特定的设计需求。 `van-dropdown-item` 是 ...
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在Vue开发过程中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题`title`始终不变，即使选中了不同的选项。本篇将详细介绍如何解决这个问题。 首先，我们需要确保Vue项目正确...
vant 中van-list的用法说明
01-18
van-list里面的元素不能有float样式，否则会连续触发 load 事件 原代码 <van v-model=active change=getTypeDate> <van v-for=(tab) title=tab.name key=tab.id> <div xss=removed class=pic-content> <...
解决vant中 tab栏遇到的坑 van-tabs
01-18
（如果tab栏横向有滚动条，那也得让被选中的高亮显示）。 所以，大部分人的解决办法就是将当前选中的tab的索引缓存起来，等回到该页面的时候，让被缓存的那个高亮显示出来。 坑的问题在于：van-tabs，里面的v-model...
Vant 中的遮罩(van-overlay)不占满整个屏幕的用法
jjw_zyfx的博客
06-14 6042
效果如下： 代码如下： <template> <div class="wrapHeader"> <div class="buttonClick" @click="showMask">显示</div> <van-overlay :show="show" @click="show = false"> <ul class="ulLi"> <li&g..
Van
TopicDev的专栏
06-24 3557
adb shell cat /proc/partitions major minor  #blocks  name  179        0    3763200 mmcblk0  179        1          1 mmcblk0p1  179        2       5120 mmcblk0p2  179        3     524288 mmcblk0
vant Overlay遮罩层背景颜色样式自定义
Deslord的博客
06-04 7929
实习不久，被调到了h5,最近在学习Vue与Vant，作为h5小白，记录一下自己遇到的问题。 vant中的Overlay遮罩层本身好用，但是有些时候，想造成“点击某个div以外的空白部分后，div消失”的效果，一般是Overlay中放置一个div并将Overlay背景设置为透明。发现csdn上竟然，很少提及。 1.首先官方接口有提及 2.所以我们需要调用custom-style，接口。相信很多小白主要问题在于如何对custom-style赋值。 赋值如下 <overlay :show="show" :
vant库使用遇到的情况
sedfghjwish77_的博客
12-16 1863
vant组件
【定期记录】踩坑
weixin_44177952的博客
02-14 364
antd form label 定宽 同时设置span和style即可 1 需要设置span，style才生效 2 style优先级更好 会使得span失效 :labelCol=’{span:1,style:“width:100px”}’ wrapperCol同理 antd chrome 出现字体模糊 （只有chrome） 关闭a-table scroll css强制换行 ;word-break:break-all;word-wrap: break-word;white-space:normal..
vue+vant移动端显示table表格加横向滚动条
ss_Tina的博客
12-14 1万+
参考文章：vant移动端显示table效果，增加复选框，可以进行多选和全选。加横向滚动条，可以看全部内容。主要是参考上面两篇文章。页面效果。
使用vant的Overlay 遮罩层做弹框，遇到的bug
sunbeibei00000的博客
08-13 5255
*1、*遇到的需求是，在一个弹框内某个区域设定一个最大高度，超出部分实现上下滚动， *2、*overlay遮罩层的lock-scroll属性默认设置为true 官方说明是：overlay锁定背景滚动，锁定时蒙层里的内容也将无法滚动 *3、*我是用overlay实现的弹框，然后需要滚动的区域，在 PC端调试可以用滚轮滚动，但是在真机上不能滑动 *4、*一开始我的解决办法是将lock-scroll的属性设置为false， 这样需要滚动的区域可以滚动了，但是底部背景也跟着滚动了，体验很差 *5、*最终解决办法是使
vant-tabs 超过五个才能横向滚动
xhj233的博客
06-26 918
设置swipe-threshold属性即可。
vantUI框架在vue项目中的应用踩坑
热门推荐
milli236的博客
07-23 4万+
细节未完善。参考地址编辑方面的应用。 1.订单提交地址等组件的应用。 使用的组件有如下： import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块； &lt;van-address-edit :area-list="area...
微信小程序中vant组件库van-search进入页面自动获取焦点具体代码
04-23
抱歉，我作为AI语言模型并不能直接提供代码，但是我可以为您提供一些思路。可以在 van-search 组件的 mounted 钩子中使用 $nextTick() 方法，将焦点转移到输入框上。 具体代码示例： ``` <template> <van-search v-model="keyword" placeholder="搜索" /> </template> <script> export default { data() { return { keyword: '' }; }, mounted() { this.$nextTick(() => { const input = document.querySelector('.van-search__input'); input.focus(); }); } }; </script> ``` 需要注意的是，使用 document.querySelector('.van-search__input') 获取输入框时，可能需要根据实际情况对 class 名进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值