关于iOS tab吸顶之后不能左右滑动的问题

最新推荐文章于 2024-06-20 14:48:23 发布
最新推荐文章于 2024-06-20 14:48:23 发布
阅读量435 收藏
点赞数
分类专栏： iOS兼容性 文章标签： vue.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49549401/article/details/116700644
版权
在iOS 12.5.2版本上，使用position: sticky;实现的tab吸顶功能导致无法左右滑动。通过检查和修改CSS样式，将父元素的样式调整为...，解决了这个问题。
摘要由CSDN通过智能技术生成

之前写项目的时候遇到过一个问题，使用position: sticky;实现tab吸顶效果，tabs超出屏幕可以左右滑动，在安卓和iOS一些版本上都可以，但是在iOS12.5.2上会出现一些问题

样式类似于这样

tab吸顶之后，就不能左右滑动了，后面检查代码，发现问题出现在css上，实现tab左右滑动效果使用的是，父元素设置

display: flex;
overflow-x: auto;

子元素设置

min-width: px2rem(160);

后

最低0.47元/天 解锁文章
田田田青
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
导航栏吸顶固定不动
m0_63683218的博客
12-11 2080
说明 在现今很多公司的官网上，都可以看到导航栏吸顶这一功能，今天向初学者介绍两种方法实现 第一种 运用html中的position属性实现 position属性常用的属性值有相对定位relative，默认值static，绝对定位absolute，固定定位fixed。还有就是一会要用放到的sticky——粘性定位。 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将
不完全解决ios浏览器页面滚动到底部或顶部后导致页面局部滑动失效的问题
weixin_34326558的博客
02-20 5929
npm插件ios-scroll-supply 1.首先给需要滑动的元素加一个touchmove事件，事件触发的时候给event设置一个属性isSCROLL为true； 2.然后给body加touchmove事件，触发事件时判断event的isSCROLL属性是否为true，否的话就禁止默认事件 3.是的话代表点击的事件源为需要滑动的元素，判断其滑动的最高点和最低点加一个限制就ok了，类似...
SwiftUI 6.0（iOS/iPadOS 18）中全新的 Tab 以及 Sidebar+悬浮 TabView 样式
最新发布
享受开发，颠倒银河
06-20 1899
在本篇博文中，我们介绍了 SwiftUI 6.0（iPadOS 18/iOS 18）新标签页中新增的 Tab 和 TabSection 原生视图，并进一步讨论了如何让 TabView 支持 Sidebar 样式以及其它有趣的新特性。
Android实现导航菜单左右滑动效果
weixin_34208185的博客
04-21 616
　　本文给大家介绍在Android中如何实现顶部导航菜单左右滑动效果。 　　今天给大家介绍在Android中实现顶部导航菜单左右滑动效果的二种解决方案。 　　第一种解决方案：  　　在以前的一篇博文中我使用android-support-v4.jar实现了左右滑动指引效果，有兴趣的朋友可以查看： http://www.cnblogs.com/hanyonglu/archiv...
iOS开发 横向分页样式 可左右滑动或点击头部栏按钮进行页面切换
aoying1375的博客
04-14 385
不多说直接上效果图和代码 1.设置RootViewController为一个导航试图控制器 // Copyright © 2016年 Chason. All rights reserved.//#import "AppDelegate.h"#import "ViewController.h"@interface AppDelegate ()@end@implementation...
iOS_解决：当点击到TableViewCell上的Button时，就无法滑动TableView的问题
mikimo的博客
03-14 677
之前面试遇到了一个问题： 长按到UIButton时，UITableView滑动不了，有遇到过么？（怎么解决？） 估计是当前面试官描述的不够清楚，我就说没有遇到过，幸而躲过了这一题。 但其实肯定是遇到过的，只是没有引起我的重视。 以下是解决办法： 1、无法滑动的问题 当点击到TableViewCell上的Button时，就无法滑动TableView的问题。 解决的办法是：自定义一个TableView继承自UITableView，并重写以下方法： override func touchesShouldCa
微信小程序-ios屏幕可左右滑动问题
weixin_46254175的博客
10-30 1563
现象：苹果手机页面可以左右滑动 引起原因：部分元素超出屏幕 .ad-finger{ width: 152rpx; height: 75rpx; position: absolute; top: 156rpx; right:-8rpx; } // 或者下面的情况 .ad-test{ position: relative; display: flex; justify-content: space-between; width: 100%;
vue仿IOS天气粘性布局/吸顶效果
08-03
实现IOS天气滚动吸顶、高度增加减少、标题透明度改变功能。本文件是vuecli组件形式便于修改个性化
浅谈react.js中实现tab吸顶效果的问题
10-19
在React.js中实现Tab吸顶效果，主要是为了创建一种用户友好的界面，使得当页面滚动到特定区域（如Tab导航）时，该区域会固定在屏幕顶部，以便用户始终能够轻松访问。这个问题的解决方案通常涉及到对滚动事件的监听、...
支持移动浏览器(手机、ipad等)左右滑动切换tab标
06-09
适合在多种移动设备终端使用的tab标签切换效果 支持ios、安卓等多种系统 包括pad、手机浏览器等 内容高度自适应 当然，pc客户端也可兼容，兼容主流浏览器，IE6还未经测试 使用方法： css、...
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
10-14
在Vue.js开发中，有时我们需要实现特定的交互效果，比如在本文中提到的“tab表格吸顶”效果。这个效果通常用于当用户滚动页面时，顶部的表格标题栏仍然固定在屏幕顶部，以便用户始终能看到当前查看的数据列。为了...
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
08-27
前一段时间小编写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab，觉的非常实用，大家可能在做项目时会用到，感兴趣的朋友跟随脚本之家小编一起学习吧
iOS 自定义tab滑块： segment功能+label混合显示；（ Slider 双区间）【应用场景：商户交易汇总表使用tab滑块进行切换/筛选不同级别的代
06-23
1、文章地址:https://blog.csdn.net/z929118967/article/details/105076636 2、视频地址：https://live.csdn.net/v/156406 3、需求商户交易汇总表使用tab滑块进行切换/筛选不同级别的代理商数据 4、应用场景：商户交易汇总表使用tab滑块进行切换/筛选不同级别的代理商数据
ios多tab demo
08-27
xcode 8.3.3下亲测有效，利用storyboard实现的多标签ios应用程序。使用语言为object c
ios-网易新闻（新闻tab）2.0来了.zip
07-11
持续更新，文件太大完整源码请移步（https://github.com/iFindTA/NHNewsBoardPro） 1>.完全自定义NHPreventScrollview（模仿网易的NTESNBPreventScrollingScrollView类自己简易实现逻辑，同一时刻最多显示6个page） 2>.隐藏导航条类似网易布局导航 3>.栏目订阅、取消订阅、拖动排序（非基于手势）同步呈现 4>.黑夜、白天阅读模式怎么优雅地切换（包括在不修改MJRefresh源码情况下简易设置支持阅读模式切换） 5>.为什么滚动重用机制弃用UICollectionView实现方式（1.0版本方式） 6>.其他未提及到的小知识点可在demo中查看 如果觉得对你有所帮助 ，请给个star！
IOS ScrollView 左右滑动（或者上下滑动）支持其中一种
Xcocode_ios的专栏
10-16 2985
IOS ScrollView 左右滑动（或者上下滑动）支持其中一种 1.左右滑动：确定UIScrollView的contentSize，如果UIScrollView中的内容填充满上下（即内容触到顶及底部）则实现了只能左右滑动 2.上下滑动：确定UIScrollView的contentSize，如果UIScrollView中的内容填充满左右（即内容触到右部及左部）则实现了只能上下滑动
vue 实现顶部左右滑动导航
YuGuang_Zhu的博客
05-10 1161
vue 实现顶部左右滑动导航 日常开发中经常用到导航这些东西，写篇文章记录下。该导航实现为点击末尾/起首位置，导航自动滑动出下一项 的效果。 思路：判断当前点击项，相对与屏幕的位置，若点击的位置，满足可移动的限制，进行自动滑动处理。 实现如下： vue <template> <div class="debug-index-page"> <div class="tab-layout" id="scroller"> <ul v-for="(tab
解决移动端ios屏幕左右滚动问题
qq_33560427的博客
08-09 312
解决移动端ios屏幕左右滚动问题
IOS学习之Tab Bar的使用和视图切换
编程资料大全
05-30 2306
在ios的程序中，Tab Bar的使用率很高，几个视图需要切换的时候，就用到tabbar。 今天的程序实现的效果是这样的，底部有几个tab Item，对应的有几个视图，切换tab Item，切换到对应的视图。 实现效果如下： 为了更好理解使用用tabbar和切换视图，我们创建一个Empty Application。 1、打开Xcode ，新建项目 ...
uniapp动态组件吸顶tab
08-24
对于uniapp动态组件吸顶tab的实现，你可以参考以下步骤： 1. 创建一个动态组件，用于展示tab内容。可以在组件中定义好tab的样式和布局。 2. 在页面中引入该动态组件，并将其作为一个子组件进行使用。 3. 使用uniapp提供的事件监听函数，监听页面的滚动事件。 4. 在滚动事件的回调函数中，判断当前页面的滚动位置是否超过了tab组件的位置，如果超过了，则将tab组件设置为吸顶状态，否则恢复正常状态。 下面是一个简单的示例代码： 在页面的template中： ```html <!-- 页面内容部分 --> <view style="height: 1000px;"></view> <!-- 引入动态组件 --> <template> <dynamic-tab :is-fixed="isTabFixed"></dynamic-tab> </template> ``` 在页面的script中： ```javascript import dynamicTab from '@/components/dynamicTab.vue'; export default { components: { dynamicTab }, data() { return { isTabFixed: false // 初始化tab组件是否吸顶 }; }, mounted() { // 监听页面滚动事件 uni.pageScrollTo({ scrollTop: 0, // 滚动到页面顶部 duration: 0 // 立即滚动，没有动画效果 }); uni.onPageScroll((res) => { // 判断页面滚动位置是否超过tab组件的位置 if (res.scrollTop >= 200) { // 假设tab组件的位置为200px this.isTabFixed = true; } else { this.isTabFixed = false; } }); } } ``` 在动态组件dynamicTab的template中： ```html <template> <view :class="{'fixed': isFixed}"> <!-- tab内容 --> </view> </template> ``` 在动态组件dynamicTab的script中： ```javascript export default { props: { isFixed: { type: Boolean, default: false // 是否吸顶，默认为false } } } ``` 通过以上步骤，你可以实现一个uniapp动态组件吸顶tab的效果。当页面滚动到一定位置时，tab组件会固定在页面顶部，提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值