Combined use of vant popup+ other components and pit avoidance Guide

Do small program development , I believe you are no stranger to form collection . But we often encounter some slightly more complex options , It's not simply filling in some words , Numbers , Or choose whether it can be done . Interactive judgment may be required , Or it can be well displayed in combination with other custom components , But such components often take up a lot of space , If you put all your thoughts on the list , The page will appear very crowded .

So how to solve this problem ？ Common ways are ,popup Pop-up layer 、 Jump to a new page and so on .

Among them, the loading jam and discontinuity of jump pages will affect the user experience , Unless it is a single multiple collection page , There is a lot of information, so let's say .

So in practical application ,popup Pop up layers are the most common , The way to solve the problem that components occupy the screen . First, let's take a look at the demonstration ：

This is a typical popup + treeSelect Combination of components , Yes, of course , there treeSelect Can be replaced by timePicker Or other components . When you think that opening a new page is shooting mosquitoes , This way can be used when it is not open and crowded , Smooth and space saving .

It's easy to use , Just nest tags ：

<van-popup show="{
     { showTree }}" round position="bottom" custom-style="height: 50%" bind:close="onCloseTreeSelect">
  <van-tree-select items="{
     { items }}" main-active-index="{
     { mainActiveIndex }}" active-id="{
     { activeId }}" bind:click-nav="onClickNav" bind:click-item="onClickItem" />
</van-popup>

Be careful ： There's a big hole here ,vant Official documents default popup attribute close-on-click-overlay—— Whether to close after clicking the mask layer , The default is true, But if you don't realize bind:close Method words , Clicking on the mask layer will not close the pop-up layer

in addition , For components with cancellation or confirmation , If and popup When combined , Recommended coverage popup Of close Button , Otherwise, it will be messy .

The full code is in github On , Ongoing update , Welcome to support ：https://github.com/Joy917/signgo