当前位置:网站首页>Solution of vant tabbar blocking content
Solution of vant tabbar blocking content
2022-07-05 16:42:00 【Joy_ nine hundred and seventeen】
As we mentioned earlier , Use vant-tabbar To replace the native tabbar, But it is found in actual use , When tab After too much page content ,tabbar It will block the content at the bottom of the page
Directly above :
We will find that , Two buttons disappeared , from 2 Can be seen at , Right side of the screen scroll Over tabbar One column , The content is covered , It did slide to the bottom, but I couldn't see the button .
Why is this so ? Custom components of applets , It's through slot The content is injected into it and then rendered , and vant-tabbar Components are adopt cover-view In the form of Views overlaid on native components , It is not a reference component in the usual sense , Therefore, it is not a peer relationship with content elements .
At first I thought that since I was tabbar cover Live in an area , Then I'll find it tabbar Height of components , Then put the bottom element on top ?
Pictured above , Did find it ,vant The default is 50px, But the fixing effect is worrying , If you are interested, you can try . I guess it's because there is still a safe distance at the bottom of the component , So this height Not exactly equal to tabbar Occupation height of , Secondly, it will also be affected by the model .
During this period, I also tried another way , use scroll-view The label wraps the content , Then set a fixed height , such as 500px, In this way, the sliding content is not affected tabbar influence , Because the regions do not intersect . But it is also affected by the model .
Therefore, the final choice is to use the form of percentage to top up a distance , That is to say :
<view style="padding-bottom: 25%;"></view>
Look at the actual effect :
Most of the models tested are fairly ok. The disadvantage is that everyone has tabbar The page of , Need to add a blank view, Not very elegant . So I consider whether I can directly modify the custom components , stay slot Add directly before and after view, Or set it directly slot Style controls internal elements , But it didn't work , So stop .
Only try to jump to a new page and hide tabbar To avoid this . If you find a better way later , Updates will be synchronized , You are also welcome to tell me , thank ~
The full code is in github On , Ongoing update , welcome star Support :https://github.com/Joy917/signgo
边栏推荐
- Cartoon: what is distributed transaction?
- Single merchant v4.4 has the same original intention and strength!
- 2020-2022两周年创作纪念日
- Basic introduction to the control of the row component displaying its children in the horizontal array (tutorial includes source code)
- ES6 drill down - Async functions and symbol types
- Hiengine: comparable to the local cloud native memory database engine
- [deep learning] [original] let yolov6-0.1.0 support the txt reading dataset mode of yolov5
- PSPNet | 语义分割及场景分析
- Data Lake (XIV): spark and iceberg integrated query operation
- 搜索 正排索引 和 倒排索引 区别
猜你喜欢
How does win11 change icons for applications? Win11 method of changing icons for applications
Today's sleep quality record 79 points
Detailed explanation of use scenarios and functions of polar coordinate sector diagram
Enter a command with the keyboard
StarkWare:欲构建ZK“宇宙”
极坐标扇图使用场景与功能详解
【刷题篇】有效的数独
【组队 PK 赛】本周任务已开启 | 答题挑战,夯实商品详情知识
《21天精通TypeScript-3》-安装搭建TypeScript开发环境.md
Reduce the cost by 40%! Container practice of redis multi tenant cluster
随机推荐
Data Lake (XIV): spark and iceberg integrated query operation
Flet教程之 12 Stack 重叠组建图文混合 基础入门(教程含源码)
普洛斯数据中心发布DC Brain系统,科技赋能智慧化运营管理
有序链表集合求交集 方法 总结
How can programmers improve their situation?
Do sqlserver have any requirements for database performance when doing CDC
漫画:什么是八皇后问题?
Solve the Hanoi Tower problem [modified version]
Using graylog alarm function to realize the regular work reminder of nail group robots
Oneforall installation and use
PHP 严格模式
Practice independent and controllable 3.0 and truly create the open source business of the Chinese people
One click installation script enables rapid deployment of graylog server 4.2.10 stand-alone version
Cheer yourself up
Is it safe for Guotai Junan to open an account online
程序员如何提升自己的格局?
2020-2022 two-year anniversary of creation
【刷題篇】鹅廠文化衫問題
scratch五彩糖葫芦 电子学会图形化编程scratch等级考试三级真题和答案解析2022年6月
【刷题篇】有效的数独