当前位置:网站首页>vant popup+其他组件的组合使用,及避坑指南
vant popup+其他组件的组合使用,及避坑指南
2022-07-05 15:21:00 【Joy_917】
做小程序开发,相信大家对于表单收集肯定不陌生。但是我们经常会碰到一些比较稍微复杂的选项,并不是简单的填一些文字,数字,或者选择一下是否就能搞定的。可能需要交互判断,或者结合其他自定义组件才能很好的展示出来,但这种组件往往都很占空间,如果一股脑都叠罗汉似的放到表单里,页面会显得非常拥挤。
那么如何解决这个问题呢?常见的方式有,popup弹出层、跳转新页面等等。
其中跳转页面的加载卡顿和不连续感会影响用户体验,除非是单独的多项收集页面,信息量很大那另说。
所以在实际应用中,popup弹出层是最常见的,用来解决组件占用屏幕问题的方式。先来看下演示:
这是一个典型的 popup + treeSelect 组件的组合,当然了,这里的treeSelect可以换成 timePicker 或者其他组件。当你觉得开新页面是大炮打蚊子,不开又很挤的时候就可以用这种方式,流畅又省空间。
用法也很简单,标签嵌套就可以了:
<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>
注意: 这里有个很坑的点是,vant 官方文档默认的 popup 属性 close-on-click-overlay——是否在点击遮罩层后关闭,默认是 true,但是如果你不实现 bind:close 方法的话,点击遮罩层是不会关闭弹出层的
另外,对于本身就有取消或者确认的组件,如果和 popup 组合时,建议覆盖 popup 的 close 按钮,否则会比较乱。
完整代码放到了github上,持续更新中,欢迎支持:https://github.com/Joy917/signgo
边栏推荐
- MySQL giant pit: update updates should be judged with caution by affecting the number of rows!!!
- Quick completion guide for manipulator (IX): forward kinematics analysis
- How difficult is it to pass the certification of Intel Evo 3.0? Yilian technology tells you
- 16.[STM32]从原理开始带你了解DS18B20温度传感器-四位数码管显示温度
- Interval DP (gravel consolidation)
- The difference between SQL Server char nchar varchar and nvarchar
- wxml2canvas
- Huiyuan, 30, is going to have a new owner
- Redis distributed lock principle and its implementation with PHP (2)
- Example of lvgl display picture
猜你喜欢
Quick completion guide for manipulator (IX): forward kinematics analysis
Analytic hierarchy process of mathematical modeling (including Matlab code)
Huiyuan, 30, is going to have a new owner
Codasip为RISC-V处理器系列增加Veridify安全启动功能
Number protection AXB function! (essence)
Transfer the idea of "Zhongtai" to the code
RepLKNet:不是大卷积不好,而是卷积不够大,31x31卷积了解一下 | CVPR 2022
Nine hours, nine people, nine doors problem solving Report
Data communication foundation - routing communication between VLANs
Appium自动化测试基础 — APPium基础操作API(一)
随机推荐
MySQL5.7的JSON基本操作
go语言编程规范梳理总结
具有倍数关系的时钟切换
vlunhub- BoredHackerBlog Moriarty Corp
episodic和batch的定义
Noi / 1.5 06: element maximum span value of integer sequence
SQL injection sqllabs (basic challenges) 11-20
Surpass palm! Peking University Master proposed diverse to comprehensively refresh the NLP reasoning ranking
Usage and usage instructions of JDBC connection pool
P1451 calculate the number of cells / 1329: [example 8.2] cells
20. [stm32] realize the function of intelligent garbage can by using ultrasonic module and steering gear
Reasons and solutions for redis cache penetration and cache avalanche
Appium automation test foundation - appium basic operation API (II)
MySQL 巨坑:update 更新慎用影响行数做判断!!!
如何将 DevSecOps 引入企业?
20.[STM32]利用超声波模块和舵机实现智能垃圾桶功能
17. [stm32] use only three wires to drive LCD1602 LCD
verilog实现计算最大公约数和最小公倍数
示例项目:简单的六足步行者
Number protection AXB function! (essence)