vant-weapp在小程序中遇到的坑

最新推荐文章于 2024-06-06 09:57:57 发布
最新推荐文章于 2024-06-06 09:57:57 发布
阅读量3k 收藏 2
点赞数 2
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34239734/article/details/109333736
版权

vant-weapp在小程序中遇到的坑

在使用vant-weapp的组件时遇到了这么个问题，点击遮罩层或者关闭图标，会报如下错误
Error: incongruent status: leave
在这里插入图片描述
根据字面翻译是层级有问题

经过搜索也没找到解决方法，那根据字面意思看的话，就是遮罩层 层级出现的问题
在这里插入图片描述
由图可以看出 我的日历组件是嵌套在多级view中的

解决办法
在这里插入图片描述
将日历组件放在最后一层view标签内就没问题了

这引申出为什么 日历组件放在多层view中点击遮罩层关闭就会报错，是否是因为遮罩层 层级被某一个view覆盖导致。但是点击取消或者确认则没有问题。

一条小鲨鱼
关注
专栏目录
vant之解决action-sheet点击取消和遮罩层的bug
KID963931445的博客
07-09 7697
vant出现点击取消按钮出现了冒泡事件，点击遮罩层，面盘弹不回去。解决代码如下： vant官方文档提供了click-overlay事件来监听遮罩被点击的事件。 <van-action-sheet @click="stopPro($event)" @click-overlay="overlay" ></van-action-sheet> methods:{ stopPro(e){ e.stopPropraation(); //组织冒泡 e.preventDefaut
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错
weixin_44730534的博客
11-24 2050
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错 “usingComponents”: { “van-button”: “/wxcomponents/vant/button/index”, “van-cell”: “/wxcomponents/vant/cell/index”, “van-cell-group”: “/wxcomponents/vant/cell-group/index”, “van-icon”: “/wxcomponents/vant/icon/index”,
van-circle显示错误 位置偏移
Young_Gao的博客
08-14 2243
postcss-pxtorem 导致的问题。 我的是nuxt的框架，解决方式为 van-circle 位置错乱 在nuxt.config.js->postcss-pxtorem 的配置中添加 selectorBlackList: ['van-circle__layer'] postcss: [ require('postcss-pxtorem')({ ...
Vant Weapp 表单组件：Calendar 日历 报 incongruent status: leave
m0_45158829的博客
03-05 761
使用Vant Weapp 表单组件：Calendar 日历 遇到的一个小坑 Error: incongruent status: leave thirdScriptError incongruent status: leave;at setTimeout callback function 原因是当前日历组件标签嵌套的层级太深了，移出来即可
Error: incongruent status: leave 解决
最新发布
tianwht的博客
06-06 121
使用vant的popup的出现了这个报错，且关闭弹窗时，会闪动关闭不了，场景是组件嵌套组件再涉及popup嵌套的场景，网上搜索的是拉到最外层可以解决，但是项目业务确实需要这种场景，而且封装了组件，拉不到最外层，最后到vant组件内部，把点击事件切换为catchtap解决。
微信小程序，自定义组件使用vant-weapp时，css样式覆盖不生效【已解决】
weixin_42289080的博客
09-22 2353
自定义组件中，使用vant-weapp的 van-empty 时，修改默认样式不生效 <van-empty description="暂无数据" /> <van-button type="primary">主要按钮</van-button> .van-empty__image { width: 200rpx; height: 200rpx; } .van-button--primary { font-size: 28rpx; background-c
微信小程序npm引入vant-weapp的踩坑记录
10-16
本文详细记录了在微信小程序项目中引入vant-weapp（一种基于Vue的轻量、可靠的移动端UI框架）时所遇到的一些问题及其解决方法。以下将根据文章内容，详细阐述微信小程序中使用npm引入依赖的流程、遇到的问题以及解决...
vant-weapp-dev.zip
03-21
《 vant-weapp-dev.zip：构建高效微信小程序UI的利器》 在移动互联网时代，微信小程序以其无需下载安装、即扫即用的特点，迅速成为开发者和用户喜爱的应用形式。为了提升用户体验，一套美观、易用且功能强大的UI...
vantweapp源代码
01-25
Vant WeApp将有赞在移动端的设计理念和开发经验移植到了微信小程序的开发环境中，使得小程序的界面设计和开发更加便捷。 源代码是软件开发的基础，对于Vant WeApp源代码的深入理解有助于开发者更好地定制化组件，...
vant-weapp_primitivezmf_vant-weapparea
09-29
【 vant-weapp_primitivezmf_vant-weapparea 】是一个基于微信小程序的开源项目，用于实现图书馆座位预约功能。这个项目结合了 vant-weapp UI 库和 primitivezmf 框架，为用户提供了一个简洁、易用的界面，使得图书...
小程序音乐播放按钮，环形进度条以及解决canvas层级高遮罩层遮不住
m0_46978096的博客
09-02 828
小程序音乐播放按钮，环形进度条以及解决canvas层级高遮罩层遮不住 这整个都是写在自定义组件里！ canvas制作 没有css代码,播放按钮初始样子 wxml代码 `<view class="cancancan" style="width:{{canWidth}};height:{{canHeight}};overflow:hidden;"> <canvas type="2d" id="myCanvas" bindtap="musicBotton" hidden="{{isTempF
《微信小程序-进阶篇》Lin-ui组件库源码分析-动画组件Transition（三）
Oliver尹的博客
08-10 648
本文难度属于：初中级，通过本文你可以了解到 Lin-ui的Transition组件内部的show属性包括show变化时整个代码流程如何运转，如何实现了动画的分段显示，以及transition的钩子函数是如何实现的
记录vant weapp 小程序组件库遇到的坑以及ios和安卓兼容问题 SubmitBar
Taurus_666
07-30 7164
组件一：SubmitBar 提交订单栏IOS不显示，安卓正常 前情提要（可忽略） 因为项目比较着急，正好这个组件跟设计图类似，欣喜万分，拿来即用。然鹅，现实跟想象中真是完全不同。 IOS上完全不展示这个组件，安卓正常。苦恼万分，想着只是css问题（想着vant不可能有这种不显示的bug），浪费半天时间，无果。第二天头脑清醒的把组件拿到别的页面尝试，竟然能展示。 问题及解决 最终，判定是因为SubmitBar 放在了tab标签里面。如果放在tab里面IOS就会有问题，放在外层就正常。 组件二: flex布
学习微信小程序开发中遇到的坑（持续更新。。。。）
echo.T的博客
05-23 6456
1、Do not have longtapDeal1 handler in current page: pages/test/test？解答：引起这个错误的原因是在pages/test/test这个目录下未找到longtapDeal1 这个function。解决方案：在对应的js文件中增加名字为longtapDeal1 的function。...
小程序报错navigateTo跳转问题
这里是前端，是不一样的前端
09-17 3229
解决报错(in promise) MiniProgramError {“errMsg“:“navigateTo:fail can not navigateTo a tabbar page“} 今天学习了小程序实现路由跳转，我在操作的时候在控制台出现以下错误信息。 问题原因： 经过查阅资料，知道使用navigateTo路由跳转方式，保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。 解决办法：只需在js文件的点击事件中，配置跳转的url地址与tabbar中的跳转地址不一样就ok. 我就
MiniProgramError
qq_44245305的博客
08-21 7659
MiniProgramError 错误原因：在引入方法的时候没有加大括号 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高
uniapp开发微信小程序：小程序报错 Request failed with status code undefined
SillyBoy的博客
06-22 6679
相同的代码在网页中没问题，在微信开发工具中却报错 百度又搜索不到 VM4473:1 (in promise) MiniProgramError Request failed with status code undefined Error: Request failed with status code undefined 报错代码处： this.$http.post("api/report/phone", this.postdata).then(resp => { if (re.
解决报错(in promise) MiniProgramError {“errMsg“:“navigateTo:fail can not navigateTo a tabbar page“}
热门推荐
星星月亮的博客
08-05 2万+
今天学习了小程序实现路由跳转，我在操作的时候在控制台出现以下错误信息。 翻译过来的意思是：（承诺中）微程序错误{“errMsg”：“n”avigateTo:故障can未导航到选项卡页“}对象 问题原因： 经过查阅资料，知道使用navigateTo路由跳转方式，保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。 解决办法：只需在js文件的点击事件中，配置跳转的url地址与tabbar中的跳转地址不一样就ok. 我就简单说一下我用navigateTo方式实现的小程序路由跳转过程 1.触
微信小程序导入Vant-Weapp组件库及出错处理
weixin_43952095的博客
05-22 1万+
微信小程序导入Vant-Weapp组件库及出错处理 一、下载Node.js* 链接：https://nodejs.org/en/ 推荐选择LST的8.0以上版本，下载安装即可，安装完成后可以进行验证 cmd打开终端，输入vant-v出现对应版本即为安装成功，也可输入npm -v查看对应的npm版本 ** 二、在微信开发工具做对应操作 ** 这里用的是有赞的Vant Weapp 链接：https:...
最新版的vant-weapp
07-27
最新版的vant-weapp可以通过以下方式进行安装： 1. 在项目目录下打开命令行终端（cmd）。 2. 运行命令 npm install @vant/weapp -S --production 或 npm install vant-weapp -S --production 进行安装。\[2\] 3. 安装完成后，你可以在项目中使用最新版的vant-weapp组件库了。\[2\] #### 引用[.reference_title] - *1* [uni-app整合最新版vant-weapp,遇到的问题和解决办法](https://blog.csdn.net/qq_40544291/article/details/105196520)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [小程序vant-weapp组件缺失，引用组件报错](https://blog.csdn.net/qq_40334370/article/details/123636410)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [微信小程序 第三方组件的运用 vant-weapp](https://blog.csdn.net/weixin_41040445/article/details/114499598)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一条小鲨鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值