vant组件overlay设置溢出滚动在手机上没有效果

最新推荐文章于 2024-08-31 15:22:23 发布
最新推荐文章于 2024-08-31 15:22:23 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 笔记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45989814/article/details/128176442
官方文档中[lock-scroll]属性默认为true，导致某些问题出现。将该属性设置为false即可解决这些问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

官方文档上有个属性:[lock-scroll]默认设置为了true，只要改成false就可以解决问题了
在这里插入图片描述

Vant 组件没有效果
忘忧
04-20 654
Vant 组件局部引用不生效
详解如何搭建mpvue框架搭配vant组件库的小程序项目
01-03
2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前，请确保你已经学习过微信官方的小程序简易教程 和自定义组件介绍 安装 方式一. 通过 npm 安装 (推荐) 小程序已经支持使用 npm 安装第三方包，详见...
vantUI组件vant-overlay组件使用时移动端不能滑动问题全纪录
Dysons的专栏
07-06 6987
移动端前端项目开发中一直使用的是vantUI，在这次的项目中遇到了vant-overlay组件中的内容不能滑动，在PC端用鼠标不能拖动 只能滚轮滑动，开始以为是我的样式或者js出现了问题，检查下来并不存在问题，后台突发灵感想着不用这个组件试一下，果然是这个vant-overlay的问题，于是弃用了，自己写了个遮罩组件用起来，不知道有没有人遇到这个问题，欢迎告知除了我这个还有没有其他的解决办法，感谢~~~ 相关:vantUI, Vue ...
Vant组件中van-overlay页面太长无法滚动
qq_56715703的博客
03-06 983
内容太长，发现电脑中滚轮可以滚动，但是手机端手指滑动动不了。在组件上加lock-scroll。
VantUI中van-overlay组件内部溢出内容不可滑动
Wyatto137的博客
08-15 1778
解决van-overlay内部内容无法滑动问题
解决移动端使用Vant van-overlay 遮罩层导致的弹窗不可滚动问题
最新发布
Hi_alan的博客
08-31 2342
我们在进行H5调试的时候，尽量使用Nexus 4模式，如下图所示：因为之前一直习惯都是Responsive 和 默认显示的那几种方式进行调试，也并没有发现问题，但是在这次的调试中发现这种浏览器样式显示正确的，但是手机端访问的时候还是会有些区别导致样式显示有问题。
移动端Vant action-sheet 无法滚动
程序员的专栏
07-24 1088
vant action-sheet 无法滚动
【JavaScript源代码】vant list组件滚动保留滚动条位置.docx
12-30
它主要用于展示大量数据的列表，并且通常与上拉加载、下拉刷新等交互效果结合使用。在某些场景下，比如在页面之间切换时，我们希望用户在返回之前浏览的位置时，列表能够保持原来的滚动条位置，即实现滚动条位置的...
vant组件小程序版 适用小程序
09-01
标题中的“vant组件小程序版”指的是Vant WeApp，它是Vant UI框架的小程序适配版本，允许开发者在微信小程序以及其他支持Vue.js语法的小程序平台上使用Vant的组件。这使得开发者可以利用Vant的丰富组件库，如按钮、...
小程序引入vant组件（已解决）
01-03
写在之前：首先要看小程序是否有package.json文件，有的话可以往下走，没有的话，需要先执行npm init写入package.json文件 第一步：npm i vant-weapp -S --production ，接着点击工具的构建npm 第二步： 我找到方法...
解决over-flow不能生效问题
Langlous2000817的博客
11-18 431
加个display: -webkit-box;原理目前没时间研究，以后研究一下。
小程序解决安卓端van-datetime-picker选择时间时，自己滚动问题
weixin_45991188的博客
09-05 1980
代码 <van-popup show="{{ showtime }}" round position="bottom" custom-style="height: 346px" bind:close="onCloseTime" close-icon="cross" closeable> <view class="pbox2 mt-100"> <van-datetime-picker type="year-month" min-date="{{ minDate }}" ma
vant 遇到van-sidebar 数据超出不能滑动
总结前端开发中遇到的问题，分享前端知识
09-14 1945
问题：项目中使用了van-popup弹出层加载子组件内容，子组件使用了van-sidebar侧边导航 解决方法： lock-scroll 是否锁定背景滚动 <van-popup v-model="showLaodingport" position="bottom" :style="{ height: '100%'}" :lock-scroll="false"> //子组件 <loadingPort @child="fromLoadingport"
z-index层级问题 及 van-overlay溢出内容不可滑动
weixin_54009353的博客
12-29 2666
1.层级显示问题，正常来讲是悬浮按钮(fixed)在遮罩层之下的，但由于给这个遮罩层外面套了一个div并且给了position: fixed;固定定位，就造成了 如下问题； 解决：将遮罩层外面div的fixed去除即可； 2.需控制后台富文本数据样式时，要注意当前页面的<style scoped >是否为scoped=>只在当前页生效。 3.使用 van-overlay在浏览器端 溢出内容可滑动，但在手机端不可滑动时，需要加上 :lock-scroll="false"的属性，这
vue3使用vant组件样式失效解决
weixin_43952634的博客
04-13 1045
【代码】vue3使用vant组件样式失效解决。
vant避坑之---------overlay弹出层只可滚动不可滑动
niceday的博客
09-22 1042
css 只可滚动不可滑动
android中网格布局组件溢出原因
fei的专栏
10-08 2710
问题描述：这是一个简单的网格布局应用，计算器界面，代码如下： < GridLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android :layout_width= "match_
vant的Loading加载动画组件的使用，通过接口拿数据时显示加载状态
m0_61663332的博客
01-09 8062
vant的Loading加载组件的使用：调用接口拿数据时，显示loading加载状态。请求完毕，结束加载状态。loading的全局使用以及单个请求的使用。
【坑】解决vant的列表组件因数据过多而导致的渲染卡顿问题
DrLemonPie的博客
03-03 3552
因为刚开始的时候加载十分流畅，越往下滑越卡顿，所以猜测不是请求发送的问题，而是渲染DOM的问题，越滑动DOM树积累越多，导致页面不流畅。一般来说组件应当有个滚动即触发的方法，最坑的是，官方文档上啥都没写，网上也搜不到，最后我依旧是在van-pull-refresh组件里乱翻它内部的方法，然后瞎勾巴试，发现它居然是有滚动触发的方法的！还有一点一定要注意，包住van-cell的那个div一定要设置高度，不然div里面的van-cell一旦不渲染，高度就会缩小，滚轮的值也会变，会出现抽搐现象。
微信小程序+vant组件 侧边导航栏滚动
09-10
总结起来，要在微信小程序中使用 Vant 组件库的侧边导航栏滚动，需要首先引入 Vant 组件库并进行配置，然后在页面中按照需求引入侧边导航栏组件并设置相应的属性和事件，最后在监听滚动事件中处理导航栏的样式即可。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值