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

最近用了一下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组件库的小程序项目mpvue+vant

app搭建微信小程序的方法步骤

将接龙折叠起来。

想要缩小表格可以将接龙折叠起来，折叠步骤：1、在手机上打开微信，选择一个群聊。2、在群聊天页面中输入接龙，点击进入接龙表格。3、输入对应信息，点击发送。4、返回群聊天页面中点击参与接龙。5、在接龙页面中点击“+”图标。6、添加昵称或输入自己编辑的内容，点击发送即可设置接龙折叠。

1、打开微信，在我的页面上，点击‘设置’

2、打开设置页面后，点击‘通用’

3、在通用设置页面上，找到‘发现页管理’，点击打开。

4、打开后，可以看到这里就有小程序的开关设置了，点击开关关闭掉就行了。

除了关闭入口之外，还有一个就是在使用微信小程序的时候，第一次会申请使用用户授权，如果你想关闭用户的权限，具体 *** 作如下：

1、在打开的小程序列表中，找到要取消授权的小程序。

2、在打开的小程序主界面，我们点击右上角的“设置”图标。

3、这时就会d出小程序的菜单，点击菜单中的“关闭小程序”菜单项。

4、在打开的小程序详情页面中，再点击右上角的“设置”按钮。

5、这时就会d出小程序的设置菜单，点击菜单中的“设置”菜单项。

6、在打开的小程序设置页面中，我们把“使用我的地理位置”与“使用我的用户信息”两个设置项的开关关闭即可。这样我们就关闭了小程序的用户授权了。

---