微信小程序使用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-sidebar-item title="区域" />
				<van-sidebar-item title="地铁" />
			</van-sidebar>
			<block wx:if="{{activeKey==0}}">
				<van-tree-select 
                    items="{{ items }}" 
                    main-active-index="{{ mainActiveIndex }}" 
                    active-id="{{ activeId }}" 
                    bind:click-nav="onClickNav" 
                    bind:click-item="onClickItem" />
			</block>
		</view>
	</van-dropdown-item>
	<!-- 可以添加更多的 DropdownItem -->
	<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
</van-dropdown-menu>

通过activeKey进行判断侧边导航是点击的那一个选项,上方的代码只写了点击到区域时的三级选择

然后在js文件中给侧边导航添加了onChange事件

  onChange(event) {
    this.setData({
      activeKey: event.detail
    })
  },

这样就可以动态设置activeKey从而进行三级选择右边内容的选择了