vant 中Tab 标签页使用sticky 粘性布局时,Tab吸顶后下不来或不灵敏的问题_van-tabs使用sticky会抖动-程序员宅基地

【问题描述】使用vant中的Tab 标签页,当添加sticky 属性时,tab吸顶后不能随滚动条下来或者下来的不灵敏或者响应不及时

【问题原因】是由于本人使用的前端框架，在公共样式中把body的样式设置了 overflow: scroll，导致了这个问题。经测试，overflow属性除了visible值可修复该问题外，其他属性均会导致这个问题的存在

【解决方法】

1.将overflow: scroll属性去掉，或改为overflow: visible。在需要使用tab标签页的页面中，单独修改body样式。

单独修改body样式的代码:

setup（）{

  document.querySelector('body').setAttribute('style', 'overflow: visible');

  onDeactivated(() => {
      document.body.removeAttribute('style');
    });
}

2.但坑爹的是,在浏览器上显示没问题,但到移动端真机上,问题还是没解决

3.最终,直接在页面的根标签的类名中加入以下样式,解决了此问题.

<style>
.rootClass{
height: 100vh; 
}
</style>

【问题原因】

overflow-y不是默认值visible,导致tab 无法正确地判断滚动容器。解决方法是去除该样式，标签上添加height: 100vh样式。

本文链接：https://blog.csdn.net/weixin_50336510/article/details/119780453

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

wifi配置工具iw源码解析_iw 源码-程序员宅基地

文章浏览阅读6k次，点赞2次，收藏22次。iw是一个基于nl80211接口的无线配置工具，用于替代原先基于wext接口的iwconfig。iw源码可以在网址 https://www.kernel.org/pub/software/network/iw/ 获取，或者使用git命令从http://git.kernel.org/?p=linux/kernel/git/jberg/iw.git. 中下载。1、简单的nl80211程序i..._iw 源码

Chrome NET::ERR_CERT_AUTHORITY_INVALID 错误分析及处理-程序员宅基地

文章浏览阅读7.3w次。Chrome NET::ERR_CERT_AUTHORITY_INVALID 错误分析及处理_chrome net::err_cert_authority_invalid

reactnative 设置背景图片--ImageBackground_react native 背景图片-程序员宅基地

文章浏览阅读2.3w次。在RN版本0.46版本的时候添加了ImageBackground控件。ImageBackground可以设置背景图片，使用方法和image一样，里面嵌套了其他的组件 <ImageBackground style={{ flex: 1 }} source={require('../../res/image/login_beijing.png')}> ..._react native 背景图片

Python 框架之 Django 的数据后台管理平台，简单的搭建、以及数据基本操作_python数据管理平台作用-程序员宅基地

文章浏览阅读3k次，点赞2次，收藏25次。Python 框架之 Django 的数据后台管理平台，简单的搭建、以及数据基本操作目录Python 框架之 Django 的数据后台管理平台，简单的搭建、以及数据基本操作一、简单介绍二、实现原理三、注意实现四、效果预览五、创建数据管理后台账户，登录后台管理六、注册模型类，以及添加自定义模型管理类，调整数据显示七、后台管理的数据基本操作八、关键代码一、简单介绍Python是一种跨平台的计算机程序设计语言。是一种面向对象的动态类型..._python数据管理平台作用

HBP-1100U 欧姆龙血压计的USB调用方法_欧姆龙hbp1100u说明书-程序员宅基地

文章浏览阅读4.8k次。安装HIDcontroller控件。1、用USB设备名获取VID，PID,建立临时缓冲区。2、checkout建立usb设备的线程3、拔插下来checkin销毁线程4、通过ondata事件获取数据指针5、通过数据指针对16进制数进行转换10进制，并处理显示unit Unit1;interfaceuses Windows, Messages, SysUtils, Var..._欧姆龙hbp1100u说明书

jupyter plotly画图不显示_jupyternotebook中plotly的图不显示-程序员宅基地

文章浏览阅读5.8k次，点赞5次，收藏11次。很多帖子说加%matplotlib inline在jupyter能用，kaggle kernel还是一片白色，原代码：from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplotimport cufflinks as cfcf.go_offline()###这两句是离线生成图片的设置cf.set_config_file(offline=True, world_readable=True)根据https:/_jupyternotebook中plotly的图不显示

随便推点

一个增强 BottomNavigationView 的安卓库。_com.ittianyu.bottomnavigationviewex.bottomnavigati-程序员宅基地

文章浏览阅读980次。一个增强 BottomNavigationView 的安卓库。_com.ittianyu.bottomnavigationviewex.bottomnavigationviewex

vnc分辨率修改_vnc 改变分辨率-程序员宅基地

文章浏览阅读1.2w次，点赞2次，收藏22次。最近一直在用putty或Xshell登录linux服务器，今天用ultraVNC Viewer登录服务器时发现自己的vnc服务器挂掉了。在此，整理下vnc操作的基本命令。查看vnc进程：ps -ef | grep vnc 该命令可以列出当前系统上所有用户vnc界面的端口号，分辨率等信息。我们要用到的只是端口号。杀掉自己vnc端口对应的进程vncserver -kill :43 我的端口号是4_vnc 改变分辨率

springBoot启动项目时导入依赖_com.alibaba.boot 依赖引入-程序员宅基地

文章浏览阅读1.1k次。pom文件常用依赖<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/m_com.alibaba.boot 依赖引入