当前位置:网站首页>vant tabbar遮挡内容的解决方式
vant tabbar遮挡内容的解决方式
2022-07-05 15:21:00 【Joy_917】
前面我们提到,使用vant-tabbar 来替换原生的tabbar,但是实际使用中发现,当tab页内容过多之后,tabbar会遮挡页面最下方的内容
直接上图:
我们会发现,两个按钮消失了,从 2 处可以看到,屏幕右侧的 scroll 越过了 tabbar 一栏,说明内容是被遮挡住了,确实滑到了底部但是看不到按钮。
为什么会这样呢?小程序的自定义组件,是通过 slot 的方式将内容注入进去再渲染出来的,而 vant-tabbar 组件是 通过 cover-view 的形式 覆盖在原生组件之上的视图 ,它并不是通常意义上的引用组件,所以和内容元素并不是同级关系。
开始我想既然被 tabbar cover 住了一块区域,那我找到 tabbar 组件的高度,然后把底部元素顶上去不就好了吗?
如上图,确实找到了,vant默认是50px,不过固定效果堪忧,大家感兴趣的可以试一下。我猜测是由于组件底部还有一段安全距离,所以这个 height 并不完全等于 tabbar 的占用高度,其次也会受机型影响。
期间也试了另一种方式,用 scroll-view 标签包裹住内容,然后设定一个固定高度,比如 500px,这样滑动内容不受 tabbar 影响,因为区域不相交。但是同样的也受机型影响。
所以最终还是选用百分比的形式顶上去一段距离,也就是:
<view style="padding-bottom: 25%;"></view>
看下实际效果:
测了大部分机型还算ok。缺点就是每一个有 tabbar 的页面,都需要加一个空 view,不太优雅。所以我考虑能否直接修改自定义组件,在 slot 前后直接加上空 view,或者直接设置 slot 的样式控制内部元素,不过都没效果,所以作罢。
只能尽量使用跳转新页面并隐藏 tabbar 来避免这种情况。后面如果发现更好的方式,会同步更新,也欢迎大佬告知,感谢~
完整代码放到了github上,持续更新中,欢迎 star 支持:https://github.com/Joy917/signgo
边栏推荐
猜你喜欢
Ionic Cordova project modification plug-in
定义严苛标准,英特尔Evo 3.0正在加速PC产业升级
CSRF, XSS science popularization and defense
Stop B makes short videos, learns Tiktok to die, learns YouTube to live?
我们为什么要学习数学建模?
Defining strict standards, Intel Evo 3.0 is accelerating the upgrading of the PC industry
Summary of the second lesson
The OBD deployment mode of oceanbase Community Edition is installed locally
Arduino controls a tiny hexapod 3D printing robot
CODING DevSecOps 助力金融企业跑出数字加速度
随机推荐
Common redis data types and application scenarios
Common PHP interview questions (1) (written PHP interview questions)
Go learning ----- relevant knowledge of JWT
Stop B makes short videos, learns Tiktok to die, learns YouTube to live?
Data communication foundation NAT network address translation
Transfer the idea of "Zhongtai" to the code
定义严苛标准,英特尔Evo 3.0正在加速PC产业升级
SQL Server learning notes
Value series solution report
Temporary cramming before DFS examination
lvgl 显示图片示例
vlunhub- BoredHackerBlog Moriarty Corp
swiper. JS to achieve barrage effect
MySQL giant pit: update updates should be judged with caution by affecting the number of rows!!!
JS knowledge points-01
OceanBase社区版之OBD方式部署方式本地安装
18.[stm32] read the ROM of DS18B20 temperature sensor and realize multi-point temperature measurement
Write a go program with vscode in one article
Common interview questions about swoole
示例项目:简单的六足步行者