最近用了一下Vant Weapp組件庫，但是由于我是用mpvue寫的，所以自然跟小程序引用不一樣，比如我最近引用了vant里面的collapse折疊面板，官網(wǎng)文檔里面介紹的使用方法是這樣的
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為數(shù)組格式
<van-collapse value="{{ activeNames }}"> <van-collapse-item title="有贊微商城" name="1"> 提供多樣店鋪模板，快速搭建網(wǎng)上商城 </van-collapse-item> <van-collapse-item title="有贊零售" name="2"> 網(wǎng)店吸粉獲客、會員分層營銷、一機多種收款，告別經(jīng)營低效和客戶流失 </van-collapse-item> <van-collapse-item title="有贊美業(yè)" name="3" disabled> 線上拓客，隨時預(yù)約，貼心順手的開單收銀 </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"> 提供多樣店鋪模板，快速搭建網(wǎng)上商城 </van-collapse-item> <van-collapse-item title="有贊零售" name="2"> 網(wǎng)店吸粉獲客、會員分層營銷、一機多種收款，告別經(jīng)營低效和客戶流失 </van-collapse-item> <van-collapse-item title="有贊美業(yè)" name="3" disabled> 線上拓客，隨時預(yù)約，貼心順手的開單收銀 </van-collapse-item></van-collapse>
export default { data () { return { activeName: '1' } }, methods: { onChange (event) { console.log(event) this.activeName = event.mp.detail } }}得把原生小程序使用方式為改為mpvue 使用方式
首先是數(shù)據(jù)綁定方式
value="{{activeNames}}"改為
v-bind:value="activeNames"http://或者:value="activeNames"
然后是事件監(jiān)聽
在van-collapse組件里加個監(jiān)聽事件
@change="onChange($event)"
mpvue中獲取event值也與原生小程序有所不同：
onChange(event){ // 獲取表單組件filed的值 console.log(event.mp.detail) // 注意加入mp}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
