詳解mpvue中使用vant時需要注意的onChange事件的坑
更新時間：2019年05月16日 10:18:28 作者：愛吃栗子的小單
這篇文章主要介紹了詳解mpvue中使用vant時需要注意的onChange事件的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
最近用了一下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ī)多種收款，告別經(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ī)多種收款，告別經(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" //或者 :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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ue3.2新增了一個指令v-memo,引入這個指令的目的是幫助大家更好的為我們的應(yīng)用做性能優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于vue3.2新增指令v-memo基本使用的相關(guān)資料,需要的朋友可以參考下2022-09-09
在不久之前,看到一個比較有意思的小程序,就是靜神木魚,可以實現(xiàn)在線敲木魚,自動敲木魚,手盤佛珠,靜心頌缽的，下面就來揭秘如何實現(xiàn)這個小程序中敲木魚的累加向上漂浮動畫，需要的可以參考一下2022-11-11
el-table?樹形數(shù)據(jù)?tree-props?多層級使用避坑
本文主要介紹了el-table?樹形數(shù)據(jù)?tree-props?多層級使用避坑,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
@click.native和@click的區(qū)別及說明
這篇文章主要介紹了@click.native和@click的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
在前端的崗位上經(jīng)常需要實現(xiàn)個生成個并下載的可視化圖表頁P(yáng)DF文件,這篇文章主要給大家介紹了關(guān)于Vue前端如何實現(xiàn)生成PDF并下載功能的相關(guān)資料,需要的朋友可以參考下2021-10-10
vue性能優(yōu)化之cdn引入vue-Router的問題
這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
文章介紹了如何在Vue中動態(tài)添加和刪除元素,通過使用Vue的響應(yīng)式數(shù)據(jù)和v-for指令,可以輕松地實現(xiàn)這一功能,文章還詳細(xì)講解了如何處理元素的添加和刪除事件,以及如何更新視圖以反映這些變化2024-12-12
vue項目中使用particles實現(xiàn)粒子背景效果及遇到的坑(按鈕沒有點擊響應(yīng))
為了提高頁面展示效果，登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡單的實現(xiàn)頁面的粒子背景效果，本文給大家分享在實現(xiàn)過程中遇到問題，需要的朋友一起看看吧2020-02-02
這篇文章主要介紹了vue項目如何部署運(yùn)行到tomcat上的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
vue如何使用js對圖片進(jìn)行點擊標(biāo)注圓點并記錄它的坐標(biāo)
這篇文章主要介紹了vue如何使用js對圖片進(jìn)行點擊標(biāo)注圓點并記錄它的坐標(biāo)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04