铁雪资源网 Design By www.gsvan.com

最近用了一下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,vant,onChange

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

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

暂无详解mpvue中使用vant时需要注意的onChange事件的坑的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。