vue项目中使用vant时tabbar遮挡页面解决方法

最新推荐文章于 2024-07-14 12:56:18 发布
最新推荐文章于 2024-07-14 12:56:18 发布
阅读量7.9k 收藏 14
点赞数 6
分类专栏： vant vue.js 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/D2073307388/article/details/107309727
版权

标题vue项目中使用Vant时tabbar遮挡页面解决方法

单页面使用:
页面底部可以增加一个div，<div style="height: 5rem;"></div>

全局使用:
<router-view />下面增加一个<div style="height: 5rem;"></div>

如果上部navbar也遮挡的话根据以上同理,只是将全局的<div style="height: 5rem;"></div>的位置改为<router-view />的上部
差距太大的话可以更改rem来实现高度的增高和减少

小杜～
关注
  • 6
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vant tabbar遮挡内容的解决方式
Joy 的博客
06-12 6659
vant tabbar 遮挡内容是由于cover-view的自定义组件实现形式导致的，与内容元素并不是同级关系。可以使用一个空view占位来解决
vant tabbar刷新问题，遮盖内容问题（vant遇到的坑）
m0_62648436的博客
10-13 1036
vant tabbar刷新问题，遮盖内容问题（vant遇到的坑）
微信小程序vant自定义tabBar组件遮挡底部内容
qq_34082921的博客
01-19 1587
直接在页面底部，添加view，，把tabBar的高度挤出来" >
el-tabs切换按钮定位不准确，部分内容被遮挡（前端vue实战踩坑记录）
sha虫剂的博客
11-15 2195
el-tabs切换按钮定位不准确，部分内容被遮挡（前端vue实战踩坑记录）
vue项目中底部导航盖住页面内容解决思路
Miss M
03-11 9099
在内容页面写一个方法（A） 传入一个页面中的参数（用来判断页面中是否有数据） 有数据的话在混入中的mounted方法中执行内容页面的方法(A) A方法 定义一个常量（底部导航的高度） this.$refs.recommend.style.bottom = bottom recommend为内容页面的DOM 加过bottom后刷新页面 this.$refs.scroll.refresh(...
小程序vant组件tabBar覆盖内容问题解决方法
xv9572的博客
11-03 2092
小程序vant组件tabBar覆盖内容问题解决方法
底部控件遮挡上面list控件的解决办法总结
m00123456789的博客
10-19 786
如下图：上面list被底部导航控件遮挡 解决思路： 方法1.为listview添加监听，滑动到底部时将底部导航隐藏，上滑时显示。 方法2.为上面布局设置android:layout_marginBottom属性 方法3.获取底部控件，直接new view() 进来，将高度设为底部控件的高度，设置给listview的setfooter方法。另外，网上有说设置 android:layout
vue3项目中跳转页面隐藏TabBar的方法
11-07
vue3项目中跳转页面隐藏TabBar的方法
在vue项目中优雅的使用SVG的方法实例详解
10-17
本文旨在介绍如何在项目中配置和方便的使用svg图标。本文以vue项目为例给大家介绍在vue项目中优雅的使用SVG的方法，需要的朋友参考下吧
vue项目中使用vue-i18n报错的解决方法
12-09
然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到...
关于使用锚点时被顶部遮挡
08-07
在使用锚点的时候点击页面滚动到对应的位置,有时候有可能被顶部导航挡住,此时就可以使用改处理方式今天调整即可
vue项目中使用Svg的方法
10-17
本文主要以 vue-cli3 搭建的项目为例，来聊一下如何在项目中更优雅的使用 svg 。感兴趣的朋友跟随小编一起看看吧
详解VUE项目中安装和使用vant组件
10-17
主要介绍了VUE安装和使用vant组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
记录 Vue 项目 使用 vant 组件 tabbbar 遇到的难点
hddlsj的博客
04-20 1077
vue
微信小程序自定义顶部导航栏防止出现内容显示不全和出现空白
6块腹肌的博客
01-18 6497
在微信小程序自定义顶部导航栏，需要设置导航栏的高度，和页面body的margin-top的值，如果这两个值不一致，都会导致页面的内容显示不全或者margin-top的值太大导致有空白。 为了解决这个问题，可以通过动态获取手机的状态栏高度 <view class='nav bg-white' style='height:{{navH}}px'> <view class='...
Echart在vue中与Tabs结合不能显示的问题
qq_41431876的博客
04-22 1189
最近在学习vue的途中，需要用到一个使用Element组件的Tabs结合Echart来使用的地方，但是出现了一点问题，切换时一直没办法显示，但无意中按出开发者工具就突然显示了，很是不解。找了很久，在一篇博客中发现一个很好用的例子。 直接在el-tab-pane标签内使用lazy="true"即可显示 代码如下 <el-tabs :tab-position="tabPosition"> ...
vant实现下拉刷新和上拉加载_解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)...
weixin_39944233的博客
12-20 1879
1. 页面在手机端不能上下滑动，在PC端浏览器正常滑动说明：在设置了overflow:auto;属性的前提下，H5页面在PC端浏览器里展示可以上下滑动，在ios上可正常滑动，在安卓手机 上不能上下滑动；这现象并不是ios和安卓兼容性问题！原因：设置了touch-action: none;这属性为局部或者全局属性，将这条属性注释即可正常滑动。2.使用PullRefresh和List列表实现下拉刷新和...
Sortable.js板块拖拽示例
最新发布
w11111xxxl的博客
07-14 783
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
vue中使用 vant tabbar自定义图标怎么实现
06-13
在使用 vant tabbar 组件时，可以通过 `icon` 属性来设置内置图标，也可以通过 `icon` 插槽来自定义图标。以下是使用插槽自定义图标的方法： 1. 在 `<van-tabbar>` 标签内部添加 `<van-tabbar-item>` 标签，用于表示每个选项卡。 2. 在每个 `<van-tabbar-item>` 标签内部添加 `<template v-slot:icon>` 标签，用于表示该选项卡的图标。 3. 在 `<template v-slot:icon>` 标签内部添加自定义图标，可以使用 vant 提供的图标组件 `<van-icon>` 或者自己编写 SVG 图标。 以下是一个示例代码： ```html <van-tabbar v-model="active"> <van-tabbar-item icon="home-o">首页</van-tabbar-item> <van-tabbar-item icon="search">搜索</van-tabbar-item> <van-tabbar-item> <template v-slot:icon> <van-icon name="photo-o" /> <span>相册</span> </template> </van-tabbar-item> <van-tabbar-item icon="setting-o">设置</van-tabbar-item> </van-tabbar> ``` 在第三个选项卡中使用了自定义图标，图标组件为 `<van-icon>`，图标名称为 `photo-o`，同时添加了一个 `<span>` 标签用于显示选项卡名称。 需要注意的是，使用自定义图标时，需要将 `icon` 属性设置为 `''`，否则会优先使用内置图标。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值