详解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 面向对象全新理练之继承与多态
Dec 03 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
JS实现判断数组是否包含某个元素示例
May 24 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
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
python实现密码强度校验
2020/03/18 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
应聘面试自我评价
2014/01/24 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
社区矫正工作方案
2014/06/04 职场文书
施工安全标语
2014/06/07 职场文书
党风廉正建设责任书
2015/01/29 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
Docker下安装Oracle19c
2022/04/13 Servers