微信小程序下拉触底卡顿

已于 2022-08-21 21:17:46 修改
阅读量853 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 前端 vscode 微信小程序
于 2021-11-21 22:47:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/FF_XM/article/details/121462104
在开发小程序时遇到一个问题，当使用特定条件触发下拉触底的toast提示时，会出现延迟显示的情况，需要用户往上滑动后再下滑才能正常显示。通过将条件改为大于等于号成功解决了这个问题，消除了下拉触底时的卡顿现象。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

做小程序案例的时候，发现像下图这样写,下拉触底时不会立即弹出toast轻提示,需要往上滑一下，再往下滑才出现轻提示(感觉像卡顿一下似的)，而后判断条件改成>=则解决下拉触底卡顿问题

FF_XM
关注
微信小程序 onReachBottom 上拉触底加载 没触发
Dove言和
08-18 3862
在数据渲染到小程序端的时候，大量数据会造成页面卡顿，严重的话会卡死，增大服务器压力 小程序自带能检测到到用户触底事件的函数 小程序自带能检测到到用户触底事件的函数 小程序自带能检测到到用户触底事件的函数 开发中可能会遇到写个底部触发事件，但是运行却没生效？ //底部触发 onReachBottom: function () { wx.showLoading({ title: '加载中...', }) console.log('到底了'); ..
微信小程序做下滑加载使用 scroll-view （uniapp和微信小程序）
weixin_44291886的博客
06-11 643
使用scroll-view做下滑加载更多内容用scroll-view做下滑加载 所必须用到的scroll-view的属性 1.scroll-y 2.scrolltoupper 用scroll-view做下滑加载 所必须用到的scroll-view的属性 1.scroll-y 2.scrolltoupper //scrolltoupper 为下滑到底部的时候所触碰的事件 当更新页面的时候需要这个属性 <template> <scroll-view :style="{ height: scr
微信小程序下拉无法刷新
A_Runner的博客
12-19 2572
“美人自古如名将，不许人间见白头” 序 下拉刷新看似简单，但实现时遇到了一个问题，始终无法实现效果，故记录在此。 下拉刷新代码实现 在页面的.json配置文件中加入enablePullDownRefresh，以启用页面的下拉刷新功能，见官网配置项 "enablePullDownRefresh": true, 在页面的js里面加入监听事件，见官网onPullDownRefresh //下拉...
微信小程序上下滑动卡顿 z-index设置不起作用
yhf
04-30 1005
今天在尝试做个微信小程序时，在开发测试时好好的，但发到真机上测试时手势上拉下拉都感到明显的卡顿，底部的菜单也没有浮在最上层。经过查找最后发现问题出现在图片上，在添加图片时看文档， 当时看了一下也没有细看说明就使用了cover-image，结果出现了以上说的两个问题。后面看文档中写到： 其中有覆盖在原生组件之上的图片视图。后面改用image后正常，不得不说一下，标签列表里不放在一起，确实容易造成误解。最后要说的是我是做后端开发的。 ...
微信小程序scroll-view滑动卡顿，下滑时向上滑动失效
weixin_45720604的博客
05-31 6874
微信小程序scroll-view滑动卡顿滑动卡顿解决方案代码实现wxml文件js文件 滑动卡顿 微信小程序scroll-view组件在滑动时频繁卡顿，向下滑动时，向上滑动无效，无法停止。小程序向下滑动惯性卡顿。 解决方案 scroll-view开启了enable-fresh。判断当前scroll位置，如果不在第一页则关闭enable-refresh，在第一也才开启。 代码实现 wxml文件 <scroll-view scroll-y="true" class="scroll" bindscroll=
微信小程序下拉刷新在真机上不回缩问题的解决方法
Candy_mi的博客
03-05 4533
加上wx.stopPullDownRefresh(); //停止下拉刷新 onPullDownRefresh:function(){ this.setData({ p: 1 }) this.getData(1, 0) wx.stopPullDownRefresh(); //停止下拉刷新 },
解决微信小程序滚动条卡顿的问题
T3165919332的博客
09-20 2115
3. 设置overflow: scroll后,父容器高度会固定,scroll-view 内部滚动不会影响外部布局。使用 scroll-view 实现滚动时,外部的父容器需要添加 overflow: scroll 样式。2. 如果不设置overflow: scroll,父容器的高度会被撑大,导致后续布局溢出父容器。原因：1. scroll-view 默认会占满整个容器的高度。使用微信小程序提供的scroll-view组件。注意：这里的scroll-view必须指定高度。
ios微信小程序下拉刷新怎么配_浅谈微信小程序中的下拉刷新和上拉加载
weixin_42362491的博客
12-28 494
下拉刷新和上拉加载是业务上一个很常见的需求，在微信小程序里，提供了下拉刷新的方法 onPullDownRefresh 。而实现上拉加载相对来说就比较不方便了。下拉刷新虽然微信的官方文档有很多坑，但下拉刷新介绍的还是很全面的。在这里稍稍带过。首先在全局 config 中的 window 配置 enablePullDownRefresh .在 Page 中定义 onPullDownRefresh 钩子...
微信小程序下拉刷新与加载更多演示
同时，微信小程序也支持上拉加载更多数据的功能，通常在页面配置中声明上拉触底事件，并在对应的js事件处理函数中编写加载数据的逻辑。这通常涉及到分页加载技术，即先加载部分数据，当用户需要更多内容时再加载后续...
微信小程序下拉多远案例
最新发布
01-03
根据你提供的引用内容，下拉触底时出现卡顿问题的解决方法是将判断条件改为大于等于（>=）。另外，你还提供了一个微信小程序的案例，其中使用了scroll-view组件来实现下拉功能。 下面是一个简单的微信小程序下拉多...
微信小程序下拉加载 多次加载的问题
lz18513030476的博客
04-29 1029
下拉时遇到了多次加载更多的问题,导致page页错乱.在加载过程中不允许滑动. wx.showLoading({ title: '正在加载', mask: true, }); mask:true 可以禁止列表的滑动. ...
微信小程序ios滑动问题（滑动卡顿，下拉拖动自定义导航栏）
热门推荐
marendu的博客
07-18 2万+
微信小程序ios滑动问题（滑动卡顿，下拉拖动自定义导航栏） 1.ios中个别机型类似6s ，对微信自带的scroll-view无法滑动； 解决：在滑动内容区添加css属性，overflow: auto; 在其父级添加overflow: hidden ； 2.ios自带的滑动，滑动时会将自定义的导航栏，一起拖动。 解决：在全局配置中添加这2个属性即可 "window": { "disa...
微信小程序下拉刷新和上拉加载解决方案
yuange
06-25 895
一 、 使用scroll-view 使用方法： 1 根据微信小程序文档开启下拉刷新和绑定回调函数， 2 关闭下拉刷新是通过 设置refresher-triggered="{{refreshStatus}}" 这个参数为false 实现的，不是wx.stop。。。。那个方法 二 不使用scroll view 1 配置页面的json 文件，开启下拉刷新和上拉加载，页面默认有这个回调函数 2 关闭下拉刷新使用 wx.stop.... 这个函数 3 缺点：不能使用s...
小程序android图片多变卡,【小程序】优化-解决swiper渲染很多图片时的卡顿
weixin_35035699的博客
05-27 979
相信各位在开发的时候应该有遇到这样一个场景，比如商品的图片浏览，有时图片的浏览会很大，多的时候达几百张或上千张，这样就需要swiper里需要很多swiper-item，如此一来渲染的时候就会很消耗性能，渲染时会有一大段的空白时间，有时还会造成卡顿，体验非常差，下面给大家介绍一下我的解决方案。首先是wxml结构：js：主要是利用current属性，swiper里面只放3个swiper-item，要显...
微信小程序开发随笔之scroll-view占满全屏安卓滚动卡顿
SuperYang的博客
04-02 1458
一、问题描述 在设置scroll-view占满整个页面的时候，android上快速滑动时出现卡顿或不流畅。 二、解决方案 将页面设置为不可滚动。如果需要下拉刷新功能，使用scroll-view的下拉刷新功能。 三、部分代码 *.json ...
微信小程序——安卓可能遇到的卡顿问题解决方案
Mickeymouse
04-07 1万+
在微信小程序开发中，页面路由之间跳转后可能会遇到页面卡顿的问题 可以检查下页面是否有使用或者多次使用redirectTo 方法，这个方法在安卓上的会造成页面卡顿的现象，但也不是必发，如果出现页面卡顿的现象不妨尝试下，可以换成reLaunch方法解决，这个问题在IOS上不会有，小程序在IOS上的性能确实比安卓好。微信内部逻辑处理不太清楚，有遇到类似问题的朋友可以尝试下这个方法 ...
小程序员 scroll滚动与页面滚动冲突造成快速滑到底部卡顿失败问题
LlanyW的专栏
11-08 1210
加上bindscroll="scrollEvent"， js写上onPageScroll， scrollEvent事件，可以用看到，执行不同的滚动。当页面使用scroll-view, 内容过多产生滚动时， 如果scrollview 的高度未配置ok,页面滚动功能和。会产生冲突，滑动到最头或者最底会有卡顿现象，是因为一会scroll滚动，一会是页面滚动，当需要悬浮导航栏的时候 监听scroll-view的距离顶部的高度。让scroll-view包裹页面所有内容。
【#】如何解决小程序的加载快慢，你学废了吗！！！
weixin_43251902的博客
10-10 2692
关于小程序的加载快慢这可是一大学问，自古以来性能都是重点，所以下面我浅谈一下自己遇到的问题和解决方法吧 一：后端优化接口，加快响应速度： 这里基本不关前端的事情，但是这也是优化小程序的一大重点，后端响应我们请求数据的速度影响了整个页面的速度，所以，把它拿到第一位。请求超过300ms就已经算是慢了，所以会影响总体速度。 建议：叫后端优化接口，加快响应速度。尽量减少无谓的请求，，将数据合并到一个接口上，这样可以方便操作，又可以节约资源 第二：图片 图片的话，对越用户上传的图片的大小验证一下，大于500K的拒绝就
小程序实现分页 && 重复加载的问题(锁 && 避免死锁)
cominglately的博客
07-17 1324
文章目录场景分析解决完整代码 场景 小程序分页 分页的时候，如果用户在服务端返回数据之前，快速的多次触底(触发下一页请求的问题) 分析 小程序实现分页的方式分为两种 一种是使用scroll-view， 通过bindscrolltolower属性绑定处理；但是在纵向滚动的时候需要设置height, 这极可能导致图片被截断展示 另外一种是Page 的onReachBottom(触底)生成周期,...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值