vue vant组件tabs sticky粘性布局fixed失效问题

已于 2022-05-04 21:53:13 修改
阅读量2.4k 收藏
点赞数 1
分类专栏： vant 文章标签： vue
于 2022-05-04 21:50:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yw_hard/article/details/124578384
版权

在vant组件中，自定义tab的title-class时，我设定了固定高度导致定位失效。

效果如下视频，

1651665531243232

一开始第一行的tab会上移，就是fixed定位失效了。当取消tab自定义class的高度时，fixed布局生效了，当时找了好久的资料也没找到类似的问题，如果大家有类似的问题就可以当做小小的参考吧

Aa独角戏
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue 使用vant插件做tabs切换和无限加载功能的实现
01-18
样例： 1.创建vue项目，不再详述 2.引入vant 之前用过很多插件做这个功能，但是效果都不尽人意，出现各种问题，直到遇到vant这个插件，完美的解决了这些小问题，如有问题，欢迎联系我 安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 3.在页面中使用 官方写的比我写的好多了，大家可以借鉴，看源代码可能比官方给的文档更直观 官方文档 我在文件中的使用，没有使用下拉刷新的功能，大家可以直接看官网代码： <template> <div
关于vant使用坑点
zH1_234567的博客
12-03 336
1.Sticky 粘性布局 在iphone中不起作用，如果要做类似于粘性布局的样式，应该用 position: flex / absolute
Antd Design Mobile tab去除下方蓝色边框和对tab里面的sticky布局的影响
zkx529的博客
03-28 595
可以看到钻尖人才下有一个深蓝色实心边框和下方的一个蓝色空心边框而下方 简历进度 下方的表格的表头使用粘性布局，粘性布局失效手机端坑还是比较多的，问题排查起来比较麻烦，最近也遇到了一些适配问题难以解决，撰写此文旨在帮助其他和我一样的前端新人，知道 transform: translate3d 属性 为什么会让粘性布局（sticky）失效的也欢迎评论，欢迎大家对文章指正，积极沟通交流。
vue-cli3打包后vant样式失效问题处理
weixin_43837268的博客
01-06 3001
在index.html中 <!-- vant-ui --> <link rel="stylesheet" href="./css/vant-ui-style.css">
关于vant van-tabs sticky属性不起作用
SongSL0812的博客
11-17 9723
原代码： <div id="app"> <div> <van-nav-bar title="维保抢单" fixed="fixed" z-index="999" left-text="返回" right-text="去首页"
微信小程序----position:sticky
12-20
微信小程序----position:sticky:通过position:fixed与position:relative切换。
vant 中Tab 标签页使用sticky 粘性布局时,Tab吸顶后下不来或不灵敏的问题
weixin_50336510的博客
08-18 4925
【问题描述】使用vant中的Tab 标签页,当添加sticky 属性时,tab吸顶后不能随滚动条下来或者下来的不灵敏或者响应不及时 【问题原因】是由于本人使用的前端框架，在公共样式中把body的样式设置了 overflow: scroll，导致了这个问题。经测试，overflow属性除了visible值可修复该问题外，其他属性均会导致这个问题的存在 【解决方法】将overflow: scroll属性去掉，或改为overflow: visible。在需要使用tab标签页的页面中，单独修改body样式。
vant tabs组件滚动、吸顶效果失效
XNHYJSL的博客
05-11 3498
vant tabs组件 设置sticky scrollspy 属性没有效果 原因出在父元素不管是第几层的父元素overflow属性，overflow不能为auto和hidden 设置完可以正常吸顶和滚动
vant 固定定位不生效
qq_32261717的博客
08-20 1360
vant的tabbar和顶部搜索固定定位不生效
css3 sticky不生效
Alice9969的博客
08-14 428
​​​​​​​转载自：https://www.jianshu.com/p/b72f504121f5 作者：这名字真不对 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 总结原因： 1. top、bottom 的生效距离由最近一个overflow属性是hidden scroll auto或 overlay 的祖先元素决定。 2. 父元素为overflow:hidden时，由于容器内无法滚动，所以实际上也无法生效。 3.必须指定top、bottom、left、right4个..
cube-sticky-fixed
08-27
效果和唯品会一样， 上面联动 支持头部固定 联动。
vue vant Area组件使用详解
10-15
主要介绍了vue vant Area组件使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue仿IOS天气粘性布局/吸顶效果
08-03
实现IOS天气滚动吸顶、高度增加减少、标题透明度改变功能。本文件是vuecli组件形式便于修改个性化
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
详解VUE项目中安装和使用vant组件
11-29
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持 babel-plugin-...
混合动力无人船上位机.zip
05-05
无人机最强算法源码，易于部署和学习交流使用
Swing界面开发和游戏开发.docx
05-05
Swing界面开发和游戏开发.docx
xx国际集团母子管控诊断报告(宣讲)gl.ppt
05-05
xx国际集团母子管控诊断报告(宣讲)gl.ppt
二叉树的遍历hahhahaha
最新发布
05-05
二叉树的遍历hahhahaha
vant sticky 粘性布局
05-24
Vant 是一个基于 Vue.js 的移动端组件库，而 sticky 粘性布局是其中一种常用的布局方式。该布局方式可以让元素在滚动时“粘”在页面的指定位置，常用于顶部导航栏、侧边栏等固定位置的元素。 在 Vant 中，可以使用 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值