【vue】解决轮播图在IOS上滑动卡顿的问题

最新推荐文章于 2023-12-05 19:03:35 发布

原创最新推荐文章于 2023-12-05 19:03:35 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ios #前端 #vue

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在App.vue中为app元素设置样式属性-webkit-overflow-scrolling:touch;以优化滚动效果。具体包括高度设置、字体平滑处理及背景颜色等。

在App.vue的文件中的app元素加上-webkit-overflow-scrolling: touch;

#app {
  height: 100vh;
  overflow: hidden;
  font-family: PingFangSC-Regular;
  background-color: #f1f3f5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_筱龙

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

RN - iOS - ScrollView联动滚动卡顿问题处理记录

iOSTianNan的博客

06-09

1803

RN 列表联动卡顿问题 iOS 卡顿, 上下左右滚动效果, 卡顿,

vue在ios手机上的一些问题（这次写的h5公众号）和后面补充的小程序问题

qq_38337245的博客

11-25

2062

坑一：使用定位fixed，底部导航不显示，代码我就不写，总结就是定位套定位，心累代码太多不想贴；坑二：禁止页面放大缩小，解决：Vue 移动端禁止页面放大缩小_fuf_xyxnxss的博客-优快云博客_移动端禁止放大缩小坑三：移动端h5页面禁止长按选择复制，解决：移动端h5页面禁止长按选择复制_艾欢欢的博客-优快云博客坑四：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移，解决：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移_料峭春风吹酒醒，微冷，山头斜...

参与评论您还未登录，请先登录后发表或查看评论

ios之关于ios14 SDCycleScrollView轮播带动画卡顿的解决

代码解释生活

11-16

1625

方法一：SDCycleScrollView设置自动滚的时间，以前默认是两秒；但是动画会卡顿： cycleScrollView.autoScrollTimeInterval=5;//自动滚的时间，时间自己调整方法二：取消动画 animated:YES改成 animated:NO [_mainView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:targetIndex inSection:0] atScrollPosition...

swiper自动轮播去除停顿

weixin_45389051的博客

12-05

1184

swiper轮播一圈之后会停顿一会然后再开始下次轮播，感觉体验感有点差。标签中加一个css样式解决。

解决页面加载时，轮播图加载过慢导致的抖动感

sinat_38546399的博客

03-07

1244

1. 不考虑兼容问题（移动端） .wrapper{ width: 100% height: 30vw; //viewport } 2. 考虑兼容问题 .wrapper{ overflow: hidden width: 100% height: 0 padding-bottom: 30% //30% 为轮播图高度占宽度的比例 } ...

iOS高性能图片轮播器

weixin_30776863的博客

01-30

LoopView collectionView, 实现高性能图片轮播获取数据 - (void)loadDidLoad { NSMutableArray *array = [NSMutableArray array]; for (int i = 0; i < 4; i++) { NSString *fileName = [NSString stringWit...

解决页面使用overflow: scroll在iOS上滑动卡顿的问题1

08-03

标题中的“解决页面使用overflow: scroll在iOS上滑动卡顿的问题1”指的是在iOS设备上，当HTML元素使用CSS属性`overflow: scroll`时，滚动可能会变得卡顿不顺畅。这个问题通常不会在Android设备上出现，使得开发者...

解决vue 界面在苹果手机上滑动点击事件等卡顿问题

10-17

针对Vue开发的移动端界面在苹果手机上出现的滑动卡顿和点击事件响应缓慢问题，我们可以从以下几个方面来理解和解决问题。首先，关于滑动卡顿的问题，一个常见的解决方案是在对应组件的最外层div上使用特定的样式。...

详解iOS中position:fixed吸底时的滑动出现抖动的解决方案

08-26

在这种方法中，需要在使用 position:fixed 的元素上加上该属性，以便解决抖动问题。 iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案可以通过解决 native 和 h5 两个原因引起的抖动来实现。开发者可以根据...

css3为何有卡顿,css3轮播为什么会卡顿

weixin_35839384的博客

08-03

568

@-webkit-keyframesimgSmall{0%{width:175px;height:175px;padding:23px;}100%{width:60px;height:60px;padding:0;}}将图片缩放中动画元素改成transform，如下@-webkit-keyframesimgSmall{0%{-webkit-transform:scale(1);}...

在Vue中使用swiper时，轮播页面一直卡在某个页面轮播的解决办法

Yukinoshita_kino的博客

08-20

1538

一. 问题 Vue项目中使用了vue-awesome-swiper轮播插件，配置好一切参数后，出现了一个问题，轮播图一直卡在第二页滑动。 轮播图参数如下： data() { return { swiperOption: { pagination: { el: '.swiper-pagination', bulletClass : 'my-bullet-swiper', // 自定义设置默认类名 bullet

深入研究-webkit-overflow-scrolling:touch及ios滚动

weixin_30731305的博客

12-14

1218

目录 1. -webkit-overflow-scrolling:touch是什么？ 2. 解决safari布局抖动的例子 2.1 方案一 2.2 方案二 3. 探究-webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug ...

移动Web轮播图IOS卡顿的问题

weixin_30662539的博客

10-22

603

晚饭前，被测试吐槽说，banner轮播手动左右滑的时候会卡顿。我一看不科学啊，大水果手机怎么会卡顿。我一看测试手中拿的是iPod，我觉得大概是这小玩意性能不强悍，后来又拿来5S，依然会卡顿，有趣的是，两个5S，一个IOS7一个IOS8，IOS7基本没有卡顿，IOS8会卡。饭后从测试那里借了iPod。。。。就着手解决这个问题。我一直觉得轮播不应该会有什么问题，因为我用的是一个库Swipe，s...

iOS解决UITableView 滑动卡顿问题

mazai66的博客

06-18

2143

给予你最简单的学习理念

解决ios无限滚动卡顿问题

weixin_41086056的博客

10-09

339

解决ios无限滚动卡顿问题 -webkit-overflow-scrolling: touch;

解决 - vue页面在iOS上滑动不流畅

sunshime的博客

07-19

2182

近期一直在写移动端的项目，偶尔会出现一些手机不兼容的问题，比如下面我要分享的这个页面在安卓手机上面可以正常滑动，但是在ios手机上面滑动偶尔会卡顿。然后我在这里就分享一下我的解决方案啦。其实解决的方法很简单，只需要在 app.vue的全局样式中加入-webkit-overflow-scrolling: touch;就好啦。 #app{ -webkit-overflow-scrolling: touch; } 希望对大家有所帮助哦！ ...

【Vue项目复习笔记】滚动区域的Bug分析与解决

qq_40992225的博客

08-07

829

怎么才能将图片加载完成和我们的refresh()对应起来，第一种方法是，将我们的图片加载完成以后执行的this.scroll.refresh()这个事件传给他的父组件GoodsList，然后再通过父子组件传值将其传给Home.vue，然后首页就能通过this.$refs.scroll.refresh()拿到这个值，但是这样就特别麻烦。也就意味着我们用Vuex做了中间的一个通信，在GoodsListItem中拿到this. $store，就可以改变Vuex里面的属性，再让首页监听这个属性。......

vue使用定时器更新时间造成的页面卡顿

qq_32058147的博客

03-30

4828

最近做一个大屏可视化项目，用定时器加延时器写时间同步更新功能，刚开始以为很简单就完事了，后面客户反应时间一场页面就卡顿，最后排查原因，原来是计时器长时间调用引发内存泄漏，后面优化了一下，果断没问题错误写法先是定义一个getData函数，用来获取当前时分秒，日期， ( moment 函数我就不说了吧，一款日期格式化插件， npm 可以下载) 再到mounted 定义一个计时器，计时器里调用getData函数实时更新时间，虽然需求是达到了，但是长时间不关闭看看，页面肯...

vue 在ios中scrollTo有兼容问题

最新发布

05-21

### Vue 在 iOS 中 `scrollTo` 的兼容性问题解决方案在开发过程中，iOS 设备上的滚动行为可能会遇到一些特殊的问题，比如白屏、输入框聚焦时页面异常滚动以及滚动条无法正常工作等。以下是针对这些问题的具体分析和解决方案。 #### 1. **解决 iOS 滚动出现白屏问题** 当使用 `-webkit-overflow-scrolling: touch` 属性时，在某些情况下可能仍然会出现白屏现象。可以通过调整滚动方式来缓解这一问题： ```javascript // 使用平滑滚动代替默认滚动 scrollEl.scrollTo({ top: 300, behavior: 'smooth' }); ``` 这种方法通过设置 `behavior: 'smooth'` 来降低滚动速度，从而减少因性能不足而导致的渲染问题[^1]。 --- #### 2. **处理输入框聚焦引起的页面滚动问题** 在 iOS 上，当用户点击输入框时，软键盘弹出会引发页面重新布局，可能导致滚动位置错误或页面卡顿。可以在输入框失去焦点时手动控制页面滚动： ```javascript changeBlur() { const userAgent = navigator.userAgent; const isIOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isIOS) { setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); }, 200); } } ``` 此方法通过检测设备是否为 iOS 并在其上应用延迟滚动逻辑，有效解决了输入框聚焦后的页面回滚问题[^2]。 --- #### 3. **修复滚动到底部或顶部时的滑动困难问题** 在 iOS 下，当容器滚动到顶部或底部时，可能出现滑动不顺畅的情况。这通常是因为滚动条到达边界后未及时响应用户的操作。可以通过微调滚动距离来解决问题： ```javascript fixIosScroll(e) { if (!this.isIOS && !this.isWXBrowser) return; const scrollHeight = e.scrollHeight; const scrollTop = e.scrollTop; const clientHeight = e.clientHeight; // 当滚动条位于顶部时，向下移动 1px if (scrollTop === 0) { e.scrollTop = 1; return; } // 当滚动条触底时，向上移动 1px if (scrollHeight - scrollTop === clientHeight) { e.scrollTop = scrollTop - 1; } } ``` 该函数会在滚动条达到上下边界时分别调整其位置，确保用户体验流畅[^3]。 --- #### 4. **优化输入框自动定位功能** 为了提升用户体验，可以实现输入框自动定位的功能，使其始终处于可见区域。具体代码如下： ```javascript methods: { scrollToInput(event) { setTimeout(() => { const inputRect = event.target.getBoundingClientRect(); const inputTop = inputRect.top + window.pageYOffset; const viewportHeight = window.innerHeight; // 如果输入框在视口下半部分，则将其滚动至合适的位置 if (inputTop > viewportHeight / 2) { window.scrollTo({ top: inputTop - viewportHeight / 3, behavior: 'smooth', }); } }, 200); }, }, ``` 这段代码利用了 `getBoundingClientRect()` 方法计算输入框相对于窗口的位置，并根据条件动态调整滚动位置[^4]。 --- ### 总结以上方案综合考虑了 iOS 环境下的多种滚动兼容性问题，包括但不限于白屏、输入框聚焦、滑动困难以及自动定位等功能需求。开发者可以根据实际场景灵活选用这些策略，以提供更优质的移动端体验。 ---