vant 固定定位不生效

最新推荐文章于 2023-12-19 17:33:56 发布
最新推荐文章于 2023-12-19 17:33:56 发布
阅读量1.4k 收藏
点赞数
分类专栏： vue vant 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32261717/article/details/126438891
版权
vue 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
vant
1 篇文章 0 订阅
订阅专栏
在使用vant和vue构建的移动端项目中，遇到顶部搜索和底部tabbar固定定位失效且tabbar被撑开的问题。解决方案是在home组件外层添加overflow:auto属性，从而实现搜索栏和tabbar的正确固定定位。
摘要由CSDN通过智能技术生成

使用vant和vue写的移动端项目，顶部的搜索和底部的tabbar固定定位不生效，tabbar也被撑开了
顶部搜索：
在这里插入图片描述

底部tabbar：
在这里插入图片描述

代码结构：
在这里插入图片描述

解决办法：
给home加上overflow:auto即可

吃货菜鸡
关注
专栏目录
vue-cli4.5.13按需引入vant，解决vant样式失效问题
weixin_46190955的博客
06-28 1961
1.使用vue-cli4.5.13新建vue项目 ①先全局安装最新版本的vue-cli,如果安装了旧版本的，最好先卸载 npm install -g @vue/cli # OR yarn global add @vue/cli @创建项目 vue create 自己项目的名称 2，下载vant npm i vant -S 3.下载babel-plugin-import并在babel.config.js中修改配置如下（babel-plugin-import文档上有详细说明如何配置） module.exp
解决Vant popup组件里面定位不生效的问题
wabcainiao的博客
11-19 2056
解决vant popup定位失效的问题
【vant-weapp】van-tabbar的placeholder属性无效
weixin_49417925的博客
05-23 660
这个代码最终是替换tabbar的，tabbar是一个专门的区域，在里面写占位元素肯定是无效的。可以看出placeholder的用途，可以用在微信小程序上，它却无法发挥出真正的效果。这样写如果在vue中我猜是肯定没错的，但这可是微信小程序啊！先来看一下官方文档对placeholder的解释。于是去看了作者的源码，发现源码是这样实现占位的。可以看到滚动条到底了，可是商品却被遮盖了。百度了许久都没找到合适的答案。可是它的效果确实这样的。
vue vant组件tabs sticky粘性布局fixed失效问题
yw_hard的博客
05-04 2728
vue vant组件tabs sticky粘性布局fixed失效
Vant 3.* 底部安全区适配 部分页面不生效
sinat_31327113的博客
10-12 2748
底部安全区适配 // index.html 增加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> // 全局样式增加 @supports(bottom:env(safe-area-inset-bottom)){ #app{ padding-bottom: co
vant移动端实现tab锚点定位和tab随滚动条自动切换
m0_50441807的博客
07-02 5239
我们先实现锚点定位，锚点定位需要借助方法，这个方法会把当前元素的顶部定位到所在有滚动条的父元素的顶部，从而实现锚点定位的功能： 注：上面不一定要使用a标签来点击定位，其他标签的点击也是可以的，这里用是因为a标签自带点击的手势图标； 实现锚点定位并不难，只需要用方法，接下来要实现滚动条滚动到哪个元素的顶部，tab就对应切换； 下面先了解几个方法的区别：，， clientHeight：带有滚动条盒子的高度 scrollHeight：带有滚动条盒子里面的滚动内容的高度 scrollTop：滚动内容被卷入的高度
如何解决IOS 下固定定位fixed 失效问题？
04-26 1504
如何解决IOS 下固定定位fixed 失效问题？ 相信大家在做移动端项目时都会遇到fixed失效的问题，在这里我们说的是在ios 下 ，头部底部都采用固定定位时，滑动中心部分时整个页面都跟着滚动也就是说固定定位失效了。那么如何解决这个问题呢？这里有个小诀窍分享给大家。 <body> <!-- fixed定位的头部 --> <div class="hea...
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
10-15
为了使这个滚动监听生效，我们需要在`mounted`生命周期钩子中添加滚动事件监听器。 关于自定义Vue Tab组件，我们可以扩展这个功能以实现更复杂的效果，例如吸顶和滚动定位。这通常涉及计算元素的相对位置，以及在...
vant 动态 粘性布局_使用 position:sticky 实现粘性布局
weixin_35577004的博客
12-23 1318
如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？{position: static;position: relative;position: absolute;position: fixed;}额，其实，我们还可以有这 3 个取值：{/* 全局值 */position: inherit;position: initial;position: unset...
粘性布局之固定表头
katherin_wanzi的博客
03-29 848
一、粘性布局 position: sticky 配合 [left, right, top, bottom] 中一个即可实现粘性布局 粘性布局只在其父元素空间内生效，且要实现 “粘性” 效果，对其父元素有以下要求，否则粘性效果会失效 必须满足父元素在需要粘的轴上的空间 > 粘性布局子元素在需要粘的轴上的大小（例如子元素设置top/bottom粘垂直轴，父元素的高度需要大于子元素的高度，这样才有可以活动的空间嘛） 父元素中不能设置 overflow: hidden 或 overflow: auto 未同
【小程序】小程序使用vant Weapp的popup时，设置position:fixed无效的问题
最新发布
要做一条翻身的咸鱼
12-19 935
小程序使用vant Weapp的popup时，设置position:fixed无效的问题
就关于vant调用插件实现固定框架的操作
weixin_45408258的博客
04-08 682
登陆------------------------ <template> <div id="dev"> <div id="login"> <h2>登录</h2> <div class="shurk"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"
前端uniapp自定义tabbar，在iPoneX上，tabbar有个盒子用了绝对定位position: absolute被遮住问题，env(safe-area-inset-bottom)无效
FUFCY的博客
06-08 1437
env(safe-area-inset-bottom)无效
微信小程序页面-筛选栏固定定位，以及使用Vant中TreeSelect控件遇到的问题
slient033的博客
11-05 4659
微信小程序页面-筛选栏固定定位，以及使用Vant中TreeSelect控件遇到的问题
移动端vant+vue2 tab页切换时底部固定部分会被手机键盘弹起问题
weixin_48494231的博客
01-04 1202
3.在watch监听获取到的b，若b
vant popover包裹元素为绝对定位时，位置不准问题解决
qq_45865796的博客
01-07 2884
h5页面开发的时候遇到 i 这种小图标，用户点击会出现提示文字，大多情况下，该图标会在文档流中，这个时候用van-popover气泡弹出框不会出现问题，但是当ui图上明显和别的元素不在同一层次的时候，我们会使用定位来实现效果，这个时候，就会出现，点击图标，但是弹出的提示却在别的位置，而这个位置就是当包裹元素刨去定位在文档流中的位置。 打开f12元素选择页面 可以看到包裹在图标外面的元素是.van-popover__wrapper，如果内部元素绝对定位，我们把鼠标移到.van-popover__wrapper
vue按钮固定在底部
weixin_44190736的博客
03-03 7143
加上样式footer <van-button class="footer" type="primary" block @click="faultClean">故障清除</van-button> style为 .footer{ position: fixed; bottom: 0; width: 100%; line-height: var(--footer-height); background: #42b983; color: #fff; } 原贴地址h
vant组件popup顶部和底部固定元素
weixin_66892551的博客
10-28 5718
如果popup里面的内容超出他的高度,用f12审查可以看到popup的位置是在移动的,所以使用sticky组件或者fixed属性都没有效果,其实只要限制popup无法滚动,在popup中设置一个父盒子和一个子盒子,父盒子设置不能滚动,子盒子设置高度和可以滚动,再给需要固定的元素设置绝对定位就可以相对于父盒子固定。
【每日问题】用vue写移动端怎样让按钮一直固定在底部
weixin_46082424的博客
12-09 2642
写页面的时候切换不同手机型号底部按钮随着页面变化而变化，卡了好久终于想到解决办法 这是html页面代码： <div class="button"> <van-button plain round hairline type="info">提交</van-button> <van-button class="add" round type="info" is-link @click="showPopup" &g
vue使用vant不生效
07-28
关于Vue使用Vant不生效的问题，可能有几种原因导致。 首先，请确保你已经正确安装了Vant，并在Vue项目中引入了Vant组件库。你可以通过在项目的入口文件（通常是main.js）中导入Vant的样式文件和注册组件来实现： `...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值