小程序 scroll-view 出现滚动卡顿解决

最新推荐文章于 2026-04-08 09:26:32 发布
原创 最新推荐文章于 2026-04-08 09:26:32 发布 · 5.2k 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
小程序

当前文章被收录于：

小程序
15 篇文章 0 人学习
订阅专栏 查看详情
本文针对在真机上出现的scroll-view问题提供了多种解决方案，包括调整层级、修改JSON配置、设置固定高度、选择不同基础库及调整滚动属性，适用于前端开发人员遇到类似问题时参考。

目前问题只会在真机上出现，开发工具中无法复现

网上有多种方式都列举出来，以便以后查阅

  1. scroll-view 内容太多，并且设置了 absolute ，将层级设高即可解决，原理不明。（反正我是这么解决的）
  2. 将 JSON 文件中的 "enablePullDownRefresh":"true", 删除
  3. 设置 scroll-view 的高度
  4. 选择不同的基础库调试
  5. 给 view 和 scrll-view 设置 -webkit-overflow-scrolling: touch
UniApp scroll-view实战：一招搞定微信小程序在iPhone上的滑动卡顿与空白问题
weixin_28309723的博客
05-02 318
本文深入解析UniApp scroll-view在微信小程序iOS端遇到的滑动卡顿与空白问题，提供完整的性能优化方案。通过禁用原生滚动、配置scroll-view增强属性及图片懒加载等技巧，显著提升页面流畅度，实测帧率从28fps提升至55fps，适用于电商、金融等复杂场景。
解决微信小程序滚动条卡顿的问题
T3165919332的博客
09-20 2330
3. 设置overflow: scroll后,父容器高度会固定,scroll-view 内部滚动不会影响外部布局。使用 scroll-view 实现滚动时,外部的父容器需要添加 overflow: scroll 样式。2. 如果不设置overflow: scroll,父容器的高度会被撑大,导致后续布局溢出父容器。原因：1. scroll-view 默认会占满整个容器的高度。使用微信小程序提供的scroll-view组件。注意：这里的scroll-view必须指定高度。
uniapp scroll-view下拉滑动卡顿问题解决
Matilda________的博客
01-06 4125
scroll-view外面不要包裹父元素 scroll-viewt添加class定宽高 <scroll-view refresher-background="lightgrey" scroll-y="true" class="scroll-view-item" @refresherrefresh="refresherrefresh" @refresherre
【小程序】scroll-view在ios机型滚动不流畅
lily19970107的博客
11-27 1623
这个问题不是滚动补流程的问题，是scrollView高度设置的有问题，因为项目是自定义navbar和tabbar，scrollView的高度应该设置为windowHeight-navbarHeight-底部的padding,有的页面没有就可以减底部的padding。可以为scrollView设置。
小程序员 scroll滚动与页面滚动冲突造成快速滑到底部卡顿失败问题
LlanyW的专栏
11-08 1409
加上bindscroll="scrollEvent"， js写上onPageScroll， scrollEvent事件，可以用看到，执行不同的滚动。当页面使用scroll-view, 内容过多产生滚动时， 如果scrollview 的高度未配置ok,页面滚动功能和。会产生冲突，滑动到最头或者最底会有卡顿现象，是因为一会scroll滚动，一会是页面滚动，当需要悬浮导航栏的时候 监听scroll-view的距离顶部的高度。让scroll-view包裹页面所有内容。
uniapp解决scroll-view回弹抖动等bug
热门推荐
qq_39905409的博客
12-09 1万+
滑动时回弹抖动： 1、设置scroll-anchoring为true 默认为false，开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。 2、不设@scroll 和scroll-top/scroll-left，如下 <scroll-view class="scroll-view_Line" :scroll-anchoring="true" scroll-y="true"> &l
uni开发小程序弹窗内滚动穿透并卡顿问题
weixin_44133966的博客
06-27 390
先说下问题：页面是列表会有滚动，弹窗是用的组件库（wot-ui）的弹窗，内容比较长（有图有文字）会有滚动，起初弹窗内直接用的overflow:auto；导致滚动卡顿不丝滑，并且会穿透到列表层，触发列表层滚动。// 剩下就是参数唤醒和参数关闭了 没什值得写的 主要还是这两个scroll-view配合。具体代码很简单，这里只放一些关键点。这里通过弹窗的开关参数来控制页面。，并导致弹窗内的滚动卡顿。这里主要提供解决思路。
uniapp scroll-view滚动条不显示及IOS中问题
細水、長流√的专栏
02-27 4952
最近在对小程序进行一些优化，发现 scroll-view 的两处问题1、IOS手机下scroll-view会存在上拉加载时卡顿情况2、IOS手机下scroll-view会存在点击不触发 navigator-hover 里的css没有找到什么好的解决办法，故只有用view替代了scroll-view。
小程序scroll-view去除滚动条
MR.杜的博客
02-02 276
使用官方配置项渲染时,ios滚动会发生卡顿 ，原因和enhanced有关。
微信小程序scroll-view滑动卡顿，下滑时向上滑动失效
weixin_45720604的博客
05-31 7245
微信小程序scroll-view滑动卡顿滑动卡顿解决方案代码实现wxml文件js文件 滑动卡顿 微信小程序scroll-view组件在滑动时频繁卡顿，向下滑动时，向上滑动无效，无法停止。小程序向下滑动惯性卡顿。 解决方案 scroll-view开启了enable-fresh。判断当前scroll位置，如果不在第一页则关闭enable-refresh，在第一也才开启。 代码实现 wxml文件 <scroll-view scroll-y="true" class="scroll" bindscroll=
c语言view作用,小程序总结（九）-关于scroll-view组件的用途
weixin_33208553的博客
05-19 605
1、可以横向滚动某一组元素。2、用做竖向滚动的时候，如果滚动的内容上方有对应的导航，你只需要将包裹你要滚动的内容即可######然后给滚动的内容设置一个高度临界值也就是超过这个高度的时候就开始滚动。这样可以做到导航栏固定不动，内容在滚动。滚动内容的导航wx:key="index" data-index="{{index}}" data-id="{{item.id}}" bindtap='chang...
微信小程序如何实现长列表更顺畅
2202_75483062的博客
03-15 1788
在对话等场景下，反向滚动是常见的功能，旧 scroll-view 并没有提供反向滚动的能力，我们来看看旧 scroll-view 下是怎么完成反向滚动的。在对话数据在加载的时候，对话列表需要在更新完列表数据之后，再使用 scroll-into-view 或者 scroll-top 来保持当前滚动位置，因为设置滚动位置会有延迟，所以容易出现。为了解决界面跳动的问题，社区上也有通过翻转的方法来解决，将 scroll-view 与 scroll-view 的子元素进行翻转。怎么接入新 scroll-view？
微信小程序中的iOS兼容性问题
ZJW222的博客
10-30 4709
记录下在微信小程序中遇到的一些兼容性问题，iOS兼容性 1.iOS中input的placeholder属性字体不居中 对placeholder设置line-height及font-size 对input设置高度 2.iOS中滚动卡顿 设置-webkit-overflow-scrolling:touch; 3.微信小程序中解决iOS中new Date() 时间格式不兼容 在实现倒计时，根据...
微信小程序overflow:auto; ios设备卡顿问题
qq_37235823的博客
04-30 1099
我们在开发微信小程序的时候，经常会使用到overflow:auto;来实现局部滚动效果，稍微注意的码有就会发现，ios真机设备上会有很明显的卡顿，但安卓设置就没这个问题。 解决方式 view{ overflow:auto; -webkit-overflow-scrolling: touch; } 给 overflow 属性添加-webkit- （chrome、safari私有属性） 友情提...
微信小程序wxs实现吸顶效果
初来乍到IT狗的博客
08-02 1539
在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中产生卡顿 (setData 渲染会阻塞其它脚本执行，导致了整个用户交互的动画过程会有延迟)， 所以使用wxs响应事件来实现吸顶效果。wxs响应事件基础库 2.4.4 开始支持，低版本需做兼容处理。 附上文档链接：wxs响应事件 吸顶效果   使用scroll-view组件实现滚动效果，页面和sc...
input ios问题 小程序_微信小程序中遇到的iOS兼容性问题小结_苏颜_前端开发者
weixin_35000379的博客
02-01 725
前言随着小程序的热度不减，更多的电商大佬来时使用开发中，经常会遇到一些兼容性的问题，下面这篇文章就记录下在微信1.iOS中input的placeholder属性字体不居中对placeholder设置line-height及font-size对input设置高度2.iOS中滚动卡顿设置-webkit-overflow-scrolling:touch;3.微信小程序中解决iOS中new Date() ...
uniapp中使用mescroll实现下拉刷新以及上拉加载
yangxun9264986的博客
03-21 5429
我们在开发小程序或者h5的时候，为了用户体验或项目对数据更新有很高要求，实现像APP一样可以下拉刷新、上拉加载数据等操作
别再踩坑了！UniApp中scroll-view横向滚动的3个关键CSS配置（附完整代码）
最新发布
weixin_42522953的博客
04-08 316
本文深入解析UniApp中scroll-view横向滚动的3个关键CSS配置，包括white-space、flex布局和overflow处理，帮助开发者避免常见陷阱。通过实战代码和性能优化技巧，解决滚动失效、子元素拖动等问题，提升多端兼容性和用户体验。
input ios问题 小程序_微信小程序中遇到的iOS兼容性问题小结
weixin_40001025的博客
12-19 731
前言随着小程序的热度不减，更多的电商大佬来时使用小程序，在微信小程序开发中，经常会遇到一些兼容性的问题，下面这篇文章就记录下在微信小程序中遇到的一些兼容性问题，iOS兼容性1.iOS中input的placeholder属性字体不居中对placeholder设置line-height及font-size对input设置高度2.iOS中滚动卡顿设置-webkit-overflow-scrolling:...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值