uniapp Vant 使用van-dropdown 下拉菜单时，关闭后遮罩下面的盒子无法触发点击

最新推荐文章于 2024-10-09 16:03:02 发布
最新推荐文章于 2024-10-09 16:03:02 发布
阅读量1.6k 收藏 2
点赞数 2
文章标签： 前端 vue.js uni-app
原文链接：https://blog.csdn.net/wakaka112233/article/details/108274514?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_utm_term~default-0.pc_relevant_paycolumn&spm=1001.2101.3001.4242.1
版权

是关于uniapp底层的问题，也是突然看到大佬一篇文章才解决的这个问题。
可以将 @vant/weapp/dropdown-item/index.wxml 里面的 van-popup 的事件改成驼峰写法 afterEnter 和 afterLeave 就可以了。
在这里插入图片描述

想见你只想见你
关注
关于小程序引用Vant中下拉菜单DropdownMenu的遮罩层Bug
qq_47608978的博客
07-25 4267
写在前面 做了一个原生小程序项目，设计图是将一个筛选放在了整个页面的中间，当然为了方便我选择了引用组件，查看了一下比较主流的小程序组件，发现Vant比较适合我的需求，于是就引用了Vant，怎么引用这里不做详细说明，接下来说一下遇到的问题，以及本人的新路历程和解决方法。 发现Bug 在引用Vant组件一直到看官方示例文档，期间都很顺利，实现效果也很满意，就当我以为这个问题即将结束的时候，新的问题出现了。下拉菜单放到中间位置，上方没有遮罩，这个时候滑动上方的部分，整个内容都会跟着滚动，然而我们引用的下拉菜
vant 下拉框样式_vue使用vant下拉框van-dropdown-item 绑定title值不变问题
weixin_39900676的博客
12-22 881
这篇文章主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧1、创建vue项目2、使用vant组件npm install vant --S全局引用时在main.js引入import Vant from 'vant';import 'vant/lib/index.css';Vue.use(V...
uniapp Vant Weapp使用van-dropdown 下拉菜单时，关闭后遮罩下面的盒子无法触发点击
wakaka112233的博客
08-28 5419
是 uni-app 底层的问题， 你可以将 @vant/weapp/dropdown-item/index.wxml 里面的 van-popup 的事件改成驼峰写法 afterEnter 和 afterLeave 就可以了
手写一个uniapp下拉菜单组件-dropDown，详细步骤！
最新发布
ge_lee的博客
10-09 331
项目要用到下拉菜单，但是发现uview2.0居然把下拉菜单组件删了，1.0是有的，于是只能自己做一个，实现下拉单选功能，多选需要改一下js逻辑。本组件只是展开的这一部分，因此在父页面当中使用需要给父节点加相对定位position: relative;需要传入展开状态dropDownState、以及列表展示数据dataList。上面已经实现了下拉选功能，遮罩层直接写在父页面当中，盖住下拉菜单下面的节点就行。selectState为父页面控制下拉菜单展开状态的变量。addList为列表数据。
微信小程序使用vant插件的DropdownMenu 下拉菜单自定义绑定关闭遮罩层方法
u013682258的博客
09-07 5002
我这里需要在下拉菜单自定义一个日历组件. van-calendar组件的bind:confirm方法里面可以调用逻辑代码. 但是我发现点击确定后遮罩层不关闭. 查看文档: js代码: /** * 自定义关闭遮罩层 * @param {*} event */ onConfirm(event) { var that = this; this.setData({ show
uniapp+vant+ts实现下拉选择（单选和多选）
weixin_46774564的博客
02-18 2722
效果 index.vue <!-- * @FileDescription: 下拉选择 * @Author: 鱼鱼 * @Date: 2022/02/15 --> <template> <van-dropdown-menu> <van-dropdown-item :title="value1"> <view class="slotBody"> <template v-for="item,
微信小程序uni-app uni-date-picker中的maskClick无效解决方法
Alisa_94的博客
12-23 1860
uni-date-picker中的maskClick无效的解决方法
vant组件 van-dropdown-menu 在小程序中覆盖了列表页，导致bindtap点击事件时不时失效
夏已微凉、
08-02 1341
vant组件 van-dropdown-menu 在小程序中覆盖了列表页，导致bindtap点击事件时不时失效
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
11-19
在Vue项目中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题（title）始终不会根据所选的选项进行更新。本篇将详细介绍如何解决这个问题。 首先，确保正确安装并引入Vant组件...
vant 自定义 van-dropdown-item的用法
10-15
在实际应用中，开发者可能还需要处理一些交互事件，例如点击关闭按钮时关闭下拉菜单，或者点击“确定”和“取消”按钮时触发相应的业务逻辑。这可以通过 Vue.js 的事件绑定（`v-on:click` 或简写 `@click`）来实现，...
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> <...
小程序-dropdownmenu 下拉菜单
06-26
dropdownmenu一个写好的微信小程序帅选条件框，多条件筛选，下拉菜单，直接引用组件就可以 读懂并灵活运用必须具有html，css ，js基础，除此之外还必须阅读小程序官方文档对组件的封装与使用相关文档
uniapp下拉框组件
WeiflR10的博客
09-20 6727
之前写过一个小程序的，引入单个下拉框是没有问题的，但是一个页面引入多个下拉框组件的话就会有bug，比如可以同时展开多个下拉框的问题，在此修复了。如果大家有什么好的办法可以告诉我一下嘛~如果想在js中输出this.isjiantou0 this.isjiantou1 this.isjiantou2 ...，可以使用模板字符串。
多个van-dropdown-item布局，相互覆盖无法点击
qq_41687299的博客
06-27 1281
多个van-dropdown-item布局，相互覆盖无法点击
uni-app引入Vant 下拉菜单dropdown选择过后边的之后再选择前边的选项出现点击无效
Florenza的博客
03-25 1067
找到 wxcomponents/vant-weapp/dropdown-item/index.wxml打开后找到after-enter和after-leave这两个事件，并改为驼峰命名：afterEnter和afterLeave即可！有遇到问题的小伙伴可以去试一试，看下是否能够解决！
小程序vant DropdownMenu 下拉菜单无法关闭
Iphone886的博客
05-31 739
vant ewapp
vue项目使用vant下拉框van-dropdown-item 绑定title值不变的解决办法
热门推荐
qq_41227106的博客
04-13 1万+
1、创建vue项目 2、使用vant组件 npm install vant --S 全局引用时在main.js引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 假如你引入之后发现页面的样式和组件都挂载了，但是console控制台会报错，说xxxx组件没有regis...
vant-ui 点击弹窗时间日期选择
weixin_45445453的博客
08-13 1613
vant-ui 点击弹窗时间日期选择 提交时为时间对象，后台返回为时间戳，使用filter过滤时间日期 <van-field label="出厂日期：" readonly clickable input-align="left" name="picker" :value="item.manufactureDate | formatter" placeholder="年/月/日" @
有赞下拉菜单html,反馈组件 - DropdownMenu 下拉菜单 - 《Vant Weapp 1.0.3 小程序UI组件库》 - 书栈网 · BookStack...
weixin_39640417的博客
06-03 789
DropdownMenu 下拉菜单引入在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手"usingComponents":{"van-dropdown-menu":"path/to/@vant/weapp/dist/dropdown-menu/index","van-dropdown-item":"path/to/@vant/weapp/dist/d...
vant4的van-dropdown-menu下拉滚动层级问题怎么解决
05-24
van-dropdown-menu 是 vant4 中的下拉菜单组件，其中包含了一个下拉滚动层级的功能。 如果你使用 van-dropdown-menu 组件时遇到了下拉滚动层级问题，可以尝试以下解决方法： 1. 设置 max-height 可以通过设置 van-dropdown-menu 组件的 max-height 属性来限制下拉菜单的最大高度，从而解决滚动层级的问题。 例如： ```html <van-dropdown-menu :max-height="200"> <!-- 下拉菜单内容 --> </van-dropdown-menu> ``` 2. 使用 van-popup 弹出层组件 如果仍然存在下拉滚动层级问题，可以使用 vant4 的弹出层组件 van-popup 来替代 van-dropdown-menu。 van-popup 组件可以实现更为灵活的弹出效果，也可以通过设置 max-height 来限制弹出层的高度，从而避免下拉滚动层级的问题。 例如： ```html <van-popup v-model="showPopup" position="bottom"> <van-dropdown-menu :max-height="200"> <!-- 下拉菜单内容 --> </van-dropdown-menu> </van-popup> ``` 希望以上解决方法能够帮到你。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值