微信小程序上拉触底事件函数onReachBottom不触发的解决方案

最新推荐文章于 2024-04-12 13:46:35 发布
最新推荐文章于 2024-04-12 13:46:35 发布
阅读量1.1w 收藏 10
点赞数 11
分类专栏： WeChat css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43447509/article/details/107732179
版权
javascript 同时被 3 个专栏收录
39 篇文章 1 订阅
订阅专栏
WeChat
29 篇文章 7 订阅
订阅专栏
css
11 篇文章 0 订阅
订阅专栏

造成不触发的原因可能有以下几种情况

  • 配置属性问题
  • 高度问题
  • 滚动条不在顶部 需要回到顶部重新计算高度
  • onReachBottom函数被覆盖

1.配置属性问题

在app.json或者本页的json文件中配置onReachBottomDistance属性，区别在于全局还是只在本页生效

2.高度问题

//设置容器高度为100%
page{
  height: 100%
}

3. 切换页面时 滚动条滚回到顶部

//切换页面时调用API
wx.pageScrollTo({
  scrollTop: 0
})

4.onReachBottom()函数被覆盖

每个页的js文件创建时自带onReachBottom函数 不需要自己单独写

sun_wei_tao
关注
  • 11
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
微信小程序 onReachBottom 上拉触底加载 没触发
Dove言和
08-18 3096
在数据渲染到小程序端的时候，大量数据会造成页面卡顿，严重的话会卡死，增大服务器压力 小程序自带能检测到到用户触底事件的函数 小程序自带能检测到到用户触底事件的函数 小程序自带能检测到到用户触底事件的函数 开发中可能会遇到写个底部触发事件，但是运行却没生效？ //底部触发 onReachBottom: function () { wx.showLoading({ title: '加载中...', }) console.log('到底了'); ..
微信小程序+上拉触底小案例
01-09
微信小程序+上拉触底小案例
【微信小程序页面出现onReachBottom不触发的情况】
没落的博客
03-06 1109
无法触发的原因是：height设置为100vh,会导致滑动不会触底。修改一下css就会触发。
onReachBottom没有触发？填坑之路
轻量开发
04-17 2028
最近搞微信小程序，遇到onReachBottom没有触发的问题。其他页面滑动到底部能触发onReachBottom。但是新搞的页面怎么设置都不行。百度各种方法都用上了。最后，我还是从引入组件排查。发现用<scroll-view/>就不会触发onReachBottom。经过查看api,发现此控件有自带的触发回调，bindscrolltolower就是触发底部回调的。
微信小程序开发学习笔记——4.10【小案例】触底加载更多数据onReachBottom
最新发布
Qy_cm的博客
04-12 535
>跟着b站up主“咸虾米_”学习中，把学习记录存到这方便后续查找。
onReachBottom不生效的原因（再骂自己一次）
weixin_53465412的博客
03-15 3430
onReachBottom和onPageScroll不生效，和普罗大众不一样的错法（55555555）
onReachBottom无法触发也不报错
qq_55928824的博客
04-27 4433
最近写微信小程序的时候想用onReachBottom做个上拉刷新，写完以后却怎么都触发不了这个事件，所以到网上找了一圈解决方案，最终解决了。在这里总结一下。 （1）index.js中onReachBottom函数重复 如果直接使用微信小程序模板，index.js中会自动生成onLoad等生命周期回调函数和onReachBottom等用户行为回调函数的空模板。 如果一开始没有把自动生成的JS文件里面的Page里面的东西删了，就会默认出现上面这个函数，自己又写了一个同名函数，不会报错。 所以在出
uni-app无法触发onReachBottom触底事件的解决方案
Esther_liew的博客
11-28 4129
uni-app在开发小程序时，无法触发onReachBottom触底函数，排除了页面配置/容器高度等问题，发现是容器设置了定位
小程序onReachBottom上拉触底/下拉刷新没有反应问题（日常踩坑）
pirs123的博客
07-11 2018
今天踩了一个坑，因为改之前同事写的页面，新功能需要用到上拉刷新获取更多数据，当我加上onReachBottom时不管怎么上拉都没有效果后来发现给了整个页面固定高度，这就导致onReachBottom不触发了，其实还有很多导致onReachBottom不触发的，比如使用scroll-view处理不当也会导致onReachBottom不执行。虽然onReachBottom是自带的方法但是一定要写在methods里面才会触发的噢。下面是去掉固定高度的效果，触发了！
uniapp 解决onReachBottom失效
qq_43351090的博客
10-21 1万+
一、为什么失效？ 当给最外层view（container）设置overflow样式后，onReachBottom钩子不触发，去除overflow后，可触发，但存在某些样式问题。 .container{ height: 100vh; background-color: #F5F6FA; overflow: scroll; } 二、解决方案 1.去除overflow，直接修改page样式 page{ height: 100vh; background-color: #F5F6FA; }
小程序onreachbottom不执行
热门推荐
为啥不能换名字的博客
08-20 2万+
今天写一个列表页遇到一个问题  不管我怎么加载更多就是不触发onreachbottom这个触底事件 先说说页面布局吧 上边筛选条件定位的下边合计定位的 我中间列表 .list-box{ width:100%; height:80%; overflow-y:scroll; position:absolute; top:110rpx; } 解决方法：因为一句样式问题 去掉hei...
uniapp页面不能触发onReachBottom事件
weixin_61728046的博客
10-27 4404
uniapp页面不能触发onReachBottom事件
微信小程序中的上拉、下拉菜单功能
10-15
主要介绍了微信小程序中的上拉、下拉菜单功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序在ios下Echarts图表不能滑动的问题解决
10-16
主要介绍了微信小程序在ios下Echarts图表不能滑动的解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,下面我们来一起学习下吧
微信小程序 刷新上拉下拉不会断详细介绍
01-03
微信小程序 上拉下拉不会断详细介绍 最开始看到效果图，不错，第一想到的是用做的，添加浮动层，然后设置浮动层高度。其实不然，大牛是”enablePullDownRefresh”: “true”后，在页面添加遮掩层，并跟随底部滑动...
微信小程序http连接访问解决方案的示例
12-01
但是也有解决方案。 1.中继访问 中继访问有两种方式，一种需要自己拥有一个云服务和域名。 拥有域名和云服务器 域名完成备案之后下载证书 https指引教程如下——> 腾讯云上免费部署HTTPS 再讲域名解析到你的云...
onReachBottom不起效【已解决】
qq_44977477的博客
03-17 1万+
onReachBottom 废话不多说，本人的原因是溢出滚动的view设置了height，去掉即可（高度撑出来） 我设置的height为100%；检测不到onReachBottom， 在网上看了一些其他人的BUG 1. json中配置 “onReachBottomDistance”:50，（这个可能性不大，基本可以忽略） 2.下面写了相同的方法，将上的事件覆盖了 3.不能和scroll-view...
微信小程序设置上拉触底事件onReachBottom()不生效，检查是不是自动生成的代码把自己写的代码覆盖掉了
weixin_54799350的博客
05-25 959
如果调试发现事件未被触发，控制台也没有输出，检查当前页面的.js文件，自己写的函数和小程序开发者工具自动生成的代码是否重复的地方，删掉一处即可。创建项目时，微信小程序开发者工具会自动生成有关上拉触底事件的处理函数。
【小程序】onReachBottom 事件为什么不能触发 ?（一秒搞定）
Songywaa的博客
04-04 1万+
onReachBottom 开发中遇到onReachBottom 不能触发 控制台只看到Invoke event onReachBottom in page: pages/alarm/alarm 自己的代码： 到最后才发现是因为页面生成得时候就自带onReachBottom 和onPullDownRefresh俩个方法： （自己写的方法在上边，给覆盖掉了） 记录这里，给跟我遇到一样问题的你！！...
微信小程序上拉触底添加数据
12-10
以下是微信小程序上拉触底添加数据的示例代码： 1. 在wxml文件中，使用scroll-view组件，并绑定onScrollToLower事件： ```html <scroll-view scroll-y="true" bindscrolltolower="loadMoreData"> <!-- 数据列表 --> <view wx:for="{{ dataList }}" wx:key="{{ index }}"> <!-- 数据项 --> </view> <!-- 加载中提示 --> <view wx:if="{{ isloading }}">加载中...</view> </scroll-view> ``` 2. 在js文件中，定义loadMoreData函数，并在其中发送请求获取更多数据： ```javascript Page({ data: { dataList: [], // 数据列表 isloading: false // 是否正在加载中 }, // 上拉触底事件 loadMoreData: function() { // 如果正在加载中，则直接返回 if (this.data.isloading) { return; } // 设置正在加载中的状态 this.setData({ isloading: true }); // 发送请求获取更多数据 wx.request({ url: 'url/to/get/more/data', success: res => { // 将新数据添加到原有数据列表中 const newDataList = this.data.dataList.concat(res.data); // 更新数据列表和加载中状态 this.setData({ dataList: newDataList, isloading: false }); }, fail: err => { // 请求失败时，更新加载中状态 this.setData({ isloading: false }); } }); } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值