微信小程序使用Vant Weapp实现三级选择

首先查看一下实现的效果

三级选择功能的实现主要是结合了vant weapp组件中的Sidebar 侧边导航以及TreeSelect 分类选择

首先要在json文件里面导入需要的组件
 

"usingComponents": {

    "van-tree-select": "@vant/weapp/tree-select/index",

    "van-sidebar": "@vant/weapp/sidebar/index",

    "van-sidebar-item": "@vant/weapp/sidebar-item/index"

}

然后在需要的wxml页面中插入代码

<van-dropdown-menu>
	<van-dropdown-item id="item" value="{
  
  { value }}" title="标题">
		<view style="display: flex;">
			<van-sidebar active-key="{
  
  { activeKey }}" bind:change="onChange">
				<van-sideb