详解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 相关文章推荐
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
vue实现动态按钮功能
May 13 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
详解如何搭建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面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
php生成excel文件的简单方法
2014/02/08 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
Ext grid 添加右击菜单
2009/11/26 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
Java编程面试题
2016/04/04 面试题
方正Java笔试题
2014/07/03 面试题
点菜员岗位职责范本
2014/02/14 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
房产代理公证处委托书
2014/04/04 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
2015感人爱情寄语
2015/02/26 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL