当前位置:网站首页>Combined use of vant popup+ other components and pit avoidance Guide
Combined use of vant popup+ other components and pit avoidance Guide
2022-07-05 16:42:00 【Joy_ nine hundred and seventeen】
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
边栏推荐
- Basic introduction to the control of the row component displaying its children in the horizontal array (tutorial includes source code)
- Some cognitive thinking
- 单商户 V4.4,初心未变,实力依旧!
- [team PK competition] the task of this week has been opened | question answering challenge to consolidate the knowledge of commodity details
- Enter a command with the keyboard
- Jarvis OJ Flag
- EDI许可证和ICP经营性证有什么区别
- Single merchant v4.4 has the same original intention and strength!
- 详解SQL中Groupings Sets 语句的功能和底层实现逻辑
- StarkWare:欲构建ZK“宇宙”
猜你喜欢
Seaborn draws 11 histograms
如何安装mysql
Detailed explanation of use scenarios and functions of polar coordinate sector diagram
Flet教程之 12 Stack 重叠组建图文混合 基础入门(教程含源码)
The database of the server is not connected to 200310060 "unknown error" [the service is up, the firewall is off, the port is on, and the netlent port is not connected]
【 brosser le titre 】 chemise culturelle de l'usine d'oies
服务器的数据库连不上了2003,10060“Unknown error“【服务已起、防火墙已关、端口已开、netlent 端口不通】
[61dctf]fm
Binary tree related OJ problems
Win11 prompt: what if the software cannot be downloaded safely? Win11 cannot download software safely
随机推荐
You should have your own persistence
[graduation season] as a sophomore majoring in planning, I have something to say
[brush questions] effective Sudoku
漫画:什么是八皇后问题?
【 brosser le titre 】 chemise culturelle de l'usine d'oies
搜索 正排索引 和 倒排索引 区别
Win11如何给应用换图标?Win11给应用换图标的方法
Practice independent and controllable 3.0 and truly create the open source business of the Chinese people
Spring Festival Limited "forget trouble in the year of the ox" gift bag waiting for you to pick it up~
为季前卡牌游戏 MotoGP Ignition Champions 做好准备!
Flet教程之 09 NavigationRail 基础入门(教程含源码)
如何将mysql卸载干净
[deep learning] [original] let yolov6-0.1.0 support the txt reading dataset mode of yolov5
Intel 13th generation Raptor Lake processor information exposure: more cores, larger cache
新春限定丨“牛年忘烦”礼包等你来领~
用键盘输入一条命令
Hiengine: comparable to the local cloud native memory database engine
文件操作--I/O
Seaborn绘制11个柱状图
Cartoon: what is the eight queens problem?