Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。值得褒奖的是，Vant Weapp 组件库更新非常迅速，平均每10天左右提交一个小版本的更新，至今最新的版本为0.5.5。

问题

但是，让人颇有遗憾的是，其提供的6大类共37个组件中，有四个组件的事件命名存在问题，即下图中加红色底纹的四个：

解决办法

在上述四个组件中部分事件命名中使用了减号，导致实际使用中这些事件看起来不起作用。

具体地说：

（1）组件tree-select

有两个事件，分别命名为click-item和click-nav。建议修改为clickItem和clickNav，改动的文件名是对应此组件子文件夹下的index.js文件。如下所示：

（2）field组件

类似上面，待修改代码行是：

this.$emit('click-icon');

建议修改为:

this.$emit('clickIcon’);

（3）popup组件

待修改click-overlay事件

（4）nav-bar组件

待修改click-left事件和click-right事件

上述各组件的上面几个事件，均可在对应的index.js文件中修改，保存即可使用。

补充

如果开发公司不断跟进vant weapp组件库的更新版本，则使用上述方案的话，您只能每次使用前都要作上述相应修改，有些麻烦了。希望有赞公司有关技术人员能够给出统一的解决办法为最合适。

转载于:https://blog.51cto.com/zhuxianzhong/2355374

Vant Weapp小程序蹲坑之事件名称问题及解决方案相关推荐

Vant Weapp小程序蹲坑之使用card组件显示价格
问题在基于mpvue+Vant Weapp组件库实战过程中,问题越来越多.网络上所谓的"坑"总结,仅仅不过是其开发中所遭所遇之"坑"而已--估计后面的&quo ...
vant weapp 下拉_Vant Weapp小程序蹲坑之使用submit-bar组件
本文介绍在Vant Weapp小程序开发中使用submit-bar组件时需要注意的部分问题.坑来坑去,先上示例代码吧,由简单到复杂顺序. main.js代码 main.json代码 index.vue ...
vant weapp 小程序获取用户信息授权
vant weapp 小程序获取用户信息授权 <template><div class="container"><van-button v-if=& ...
分享一个Vant Weapp小程序UI组件库
Vant Weapp官方地址:https://youzan.github.io/vant-weapp/#/ Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提 ...
初始化Vant Weapp小程序
1. 前置条件:安装node.js,安装后通过:node -v确认是否安装成功 2. 在微信开发者工具创建小程序 3. 初始化右击"miniprogram"目录,进入" ...
Uniapp-微信小程序实现全局事件监听并进行数据埋点
Uniapp-微信小程序实现全局事件监听并进行数据埋点零.前言最近接到需求,领导希望使用微信开放平台上免费的We分析进行数据埋点,但又不希望在现有uniapp开发的微信小程序代码上做侵入式修改,笔 ...
小程序 WXS响应事件（超出两屏显示返回顶部按钮）
小程序 WXS响应事件(超出两屏显示返回顶部按钮) 两种解决办法: view页面形式实现: <wxs module="test" src="./test.wxs&q ...
小程序 WXS响应事件（滚动菜单栏tab吸顶）
小程序 WXS响应事件(滚动菜单栏tab吸顶) 解决问题: 小程序页面滚动,tab触顶吸顶解决办法: 1)页面滚动事件中监听处理(不推荐) 缺点:在安卓端性能非常差,吸顶效果反应迟钝,不流畅等问题. ...
关于小程序的bindscrolltolower事件失效，已解决
公司最近在开发一款小程序,我也是刚上手,坑挺多的,特意来记录一下. 关于微信小程序的bindscrolltolower事件失效,我贴一下第一次写的代码. 这样使用bindscrolltolower 事 ...

Vant Weapp小程序蹲坑之事件名称问题及解决方案

问题