I recently used the Vant Weapp component library, but since I wrote it in mpvue, it is naturally different from the mini program reference. For example, I recently quoted the collapse folding panel in vant.Official website documentationThe usage method described here is like this
1. Introduce components in or
"usingComponents": {
"van-collapse": "path/to/vant-weapp/dist/collapse/index",
"van-collapse-item": "path/to/vant-weapp/dist/collapse-item/index"
}
2. Control the expanded panel list through value, and activeNames is the array format
<van-collapse value="{{ activeNames }}">
<van-collapse-item title="Youzan WeChat Mall" name="1">
Provide a variety of store templates，Quickly build an online mall
</van-collapse-item>
<van-collapse-item title="Youzan Retail" name="2">
Online store attracts fans and customers、Member layered marketing、Multiple payments for one machine，Say goodbye to business inefficiency and customer churn
</van-collapse-item>
<van-collapse-item title="There is a praise for the cause" name="3" disabled>
Online customer development，Make an appointment anytime，Careful and easy order cash register
</van-collapse-item>
</van-collapse>
Page({
data: {
activeNames: ['1']
},
onChange(event) {
({
activeNames:
});
}
});
But this cannot be introduced directly in mpvue
Below is my code
<van-collapse :value="activeNames" @change="onChange($event)"> <van-collapse-item title="Youzan WeChat Mall" name="1"> Provide a variety of store templates，Quickly build an online mall </van-collapse-item> <van-collapse-item title="Youzan Retail" name="2"> Online store attracts fans and customers、Member layered marketing、Multiple payments for one machine，Say goodbye to business inefficiency and customer churn </van-collapse-item> <van-collapse-item title="There is a praise for the cause" name="3" disabled> Online customer development，Make an appointment anytime，Careful and easy order cash register </van-collapse-item> </van-collapse>
export default {
data () {
return {
activeName: '1'
}
},
methods: {
onChange (event) {
(event)
=
}
}
}
You have to change the usage method of the native applet to mpvue
First, the data binding method
value="{{activeNames}}"
Change to
v-bind:value="activeNames" //or:value="activeNames"
Then event monitoring
Add a listen event in the van-collapse component
@change="onChange($event)"
Getting event values in mpvue is also different from native applets:
onChange(event){ // Get the value of the form component filed () // Please add mp}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.