详解mpvue中使用vant时需要注意的onChange事件的坑


Posted in Javascript onMay 16, 2019

最近用了一下Vant Weapp组件库,但是由于我是用mpvue写的,所以自然跟小程序引用不一样,比如我最近引用了vant里面的collapse折叠面板,官网文档里面介绍的使用方法是这样的

1.在 app.json 或 index.json 中引入组件

"usingComponents": {
 "van-collapse": "path/to/vant-weapp/dist/collapse/index",
 "van-collapse-item": "path/to/vant-weapp/dist/collapse-item/index"
}

2.通过value控制展开的面板列表,activeNames为数组格式

<van-collapse value="{{ activeNames }}">
 <van-collapse-item title="有赞微商城" name="1">
  提供多样店铺模板,快速搭建网上商城
 </van-collapse-item>
 <van-collapse-item title="有赞零售" name="2">
  网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
 </van-collapse-item>
 <van-collapse-item title="有赞美业" name="3" disabled>
  线上拓客,随时预约,贴心顺手的开单收银
 </van-collapse-item>
</van-collapse>
Page({
 data: {
  activeNames: ['1']
 },
 onChange(event) {
  this.setData({
   activeNames: event.detail
  });
 }
});

但是在mpvue里面不能直接这样引入

下面是我的代码

<van-collapse :value="activeNames" @change="onChange($event)">
 <van-collapse-item title="有赞微商城" name="1">
  提供多样店铺模板,快速搭建网上商城
 </van-collapse-item>
 <van-collapse-item title="有赞零售" name="2">
  网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
 </van-collapse-item>
 <van-collapse-item title="有赞美业" name="3" disabled>
  线上拓客,随时预约,贴心顺手的开单收银
 </van-collapse-item>
</van-collapse>
export default {
 data () {
  return {
   activeName: '1'
  }
 },
 methods: {
  onChange (event) {
   console.log(event)
   this.activeName = event.mp.detail
  }
 }
}

得把原生小程序使用方式为改为mpvue 使用方式

首先是数据绑定方式

value="{{activeNames}}"

改为

v-bind:value="activeNames"
//或者
:value="activeNames"

然后是事件监听

在van-collapse组件里加个监听事件

@change="onChange($event)"

mpvue中获取event值也与原生小程序有所不同:

onChange(event){ // 获取表单组件filed的值
 console.log(event.mp.detail) // 注意加入mp
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
vuex存值与取值的实例
Nov 06 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 #Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 #Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 #Javascript
怎样在vue项目下添加ESLint的方法
May 16 #Javascript
eslint 的三大通用规则详解
May 16 #Javascript
webpack项目使用eslint建立代码规范实现
May 16 #Javascript
Vue项目中使用jquery的简单方法
May 16 #jQuery
You might like
PHP中比较时间大小实例
2014/08/21 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
jquery 学习笔记一
2010/04/07 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python修改字典键(key)的方法
2019/08/05 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
python实现数字炸弹游戏
2020/07/17 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
销售人员个人求职信
2013/09/26 职场文书
寒假思想汇报
2014/01/10 职场文书
新三好学生主要事迹
2014/01/23 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
简历自荐信范文
2015/03/09 职场文书
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers