?先看效果：上圖?

? ?

? ? ? ?看了一下小程序的開發(fā)文檔，好像沒有發(fā)現(xiàn)可以直接實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)的組件或者可選的 API（如果有，請(qǐng)打醒我），不過它提供了自定義選擇器的組件picker-view和picker-view-column，picker-view-column相當(dāng)于是選擇器的每一列，并且picker-view-column之間的數(shù)據(jù)都是獨(dú)立的，而且picker-view提供了bindchange屬性，那么就可以根據(jù)觸發(fā)bindchange事件返回的值來判斷哪一列發(fā)生了改變，從而再實(shí)時(shí)設(shè)置其他列的數(shù)據(jù)。這就是實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)的思路。

但是感覺好麻煩，這里引用了 Mpvue-WeUI?

Mpvue-WeUI??https://mpcomponent.github.io/mpvue-weui/guide/

封裝好的一些功能組件，省的去寫樣式了，基本都是微信小程序原生封裝的，不止這一個(gè)組件挺好用的！

代碼全↓↓↓↓

<template><div class="longinPage"><div class="plan_list" hover-class="weui-cell_active"> <div class="plan_name plan_Origin" @click="showMulLinkageTwoPicker">名稱 &nbsp;&nbsp;&nbsp;{{plan_name}}</div><mp-picker ref="mpPicker" :mode="mode" :deepLength=deepLength :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm" :pickerValueArray="pickerValueArray"></mp-picker></div></div></template><script> import mpPicker from 'mpvue-weui/src/picker'; export default {data () {return {mode: 'multiLinkageSelector',pickerValueArray: [{label: '豬',value: 100,children: [{label: '大豬',value: 101},{label: '小豬',value: 102}]},{label: '牛',value: 200,children: [{label: '奶牛',value: 210},{label: '耕牛',value: 202},{label: '花花牛',value: 203}]},{label: '羊',value: 300,children: [{label: '山羊',value: 301},{label: '綿羊',value: 302}]}],pickerValueDefault: [0, 0],}},components: {mpPicker,},mounted(){this.onLoad()},methods: {//標(biāo)題onLoad:function(options){wx.setNavigationBarTitle({title: '提交計(jì)劃'})},//名稱顯示2級(jí)聯(lián)動(dòng)showMulLinkageTwoPicker() {this.$refs.mpPicker.show();},//名稱確定onConfirm(e) {this.plan_name=e.label},} } </script></style>

引用ui 后 不需添加樣式，其實(shí)這個(gè) 就是封裝好的！

總結(jié)

以上是生活随笔為你收集整理的mpvue开发微信小程序多级联动功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。