详解mpvue中使用vant时需要注意的onChange事件的坑
2019-05-25 18:02
1111 查看
最近用了一下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 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- mpvue中使用vant时需要注意的onChange事件的坑
- 浅谈使用mpvue开发小程序需要注意和了解的知识点
- PCL 使用 pcl::visualization::PCLVisualizer 类里面的键盘事件方法 如何使用及需要注意的事项
- getchar()函数的详解以及使用时需要注意的一些细节-C语言基础
- 在Drupal的form表单中使用js事件,比如onClick和onChange等,或者加载一些css样式等自己需要的杂七杂八的东西
- ubuntu下alias使用详解(有许多需要注意的细节)
- 在Drupal的form表单中使用js事件,比如onClick和onChange等,或者加载一些css样式等自己需要的杂七杂八的东西
- 详解Android使用Html.fromHtml需要注意的地方
- Vant Weapp的dialog组件在mpvue小程序中使用注意事项
- scanf()函数的详解以及使用时需要注意的一些细节-C语言基础
- ubuntu下alias使用详解(有许多需要注意的细节)
- 详解使用mpvue开发github小程序总结
- c#中ref和out参数使用时需要注意的问题
- Firefox中Javascript使用event对象需要注意的问题
- Effective STL 笔记若干-有关STL使用需要注意的方面
- .net下导致Session失效的一种情况:js教本中使用window.open和window.showModalDialog时需要注意
- 使用DataTable需要注意
- 使用jQuery form validation v1.0 的朋友们需要注意了
- 使用final修饰符需要注意的地方
- BSTR详解三 - BSTR使用注意事项