微信小程序无法进行上拉触底操作

最新推荐文章于 2024-10-16 09:12:58 发布

安定.528

最新推荐文章于 2024-10-16 09:12:58 发布

阅读量683

点赞数 8

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_67596313/article/details/134144553

版权

作者在学习微信小程序开发时遇到上拉触底功能无法实现的问题，发现原因是项目创建时app.json中的配置错误。文章揭示了解决方案：删除不必要的配置后，触底功能恢复正常。提醒读者注意检查项目配置以避免此类问题。

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

这是我在学习微信小程序时，遇到的问题

我无法进行上拉触底操作！

无论模拟机，还是真机，都无法实现上拉触底，在其他博客那里看了很多：

1.长度不够（手机屏幕为750rpx）
2.onReachBottom() 方法被覆盖
3.滚动条不在顶部需要回到顶部重新计算高度
4.onReachBottomDistance配置属性问题

都没有一点用处！！！

后来发现是项目创建时的配置问题！！！
在app.json文件下，看看有没有这个配置，删掉它！
在这里插入图片描述

就出现我想要的上拉

在这里插入图片描述
我看CSDN很多博客都没有说到项目配置问题，所以就想提出来，希望其他同学遇到类似问题，能够更快的解决！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

安定.528

关注关注

8
点赞
踩
8

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序开发系列（三十二）·如何通过小程序的API实现页面的上拉加载（onReachBottom事件）和下拉刷新（onPullDownRefresh事件）

时光の尘的博客

03-14

4660

① usingComponents: 这里可以列出项目中所需要使用的组件，可以在这里注册项目自定义的组件，以便在页面中引用和调用。③ enablePullDownRefresh: 设置为 true 表示页面可以下拉刷新，用户下拉页面时会触发下拉刷新事件。① 在 app.json 或者 page.json 中开启允许下拉，同时可以配置窗口、loading 样式等。下拉刷新是小程序中常见的一种刷新方式，当用户下拉页面时，页面会自动刷新，以便用户获取最新的内容。

微信小程序下拉刷新与上拉触底的全面教程

最新发布

孤客科技

11-25

1805

下拉刷新是一种常见的用户交互方式，用户通过在页面上向下滑动来触发数据的更新。这种方式直观、简单，能够有效提升用户体验。上拉触底是指用户在页面底部向上滑动时，自动加载更多内容的功能。这种方式能够让用户在浏览内容时，轻松获取更多信息，而无需手动点击加载按钮。合理使用下拉刷新与上拉触底：根据用户需求合理选择使用下拉刷新或上拉触底，提升用户体验。优化数据请求：在请求数据时，注意控制请求频率，避免频繁请求导致性能问题。提供友好的加载提示：在数据加载过程中，提供友好的加载提示，提升用户体验。

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

微信小程序 上拉加载配置，上拉加载设置不生效问题

Lv骚年

09-08

2527

一、上拉加载配置 1：json文件配置 "onReachBottomDistance":50 { "usingComponents": {}, "navigationBarTitleText": "考勤记录", "enablePullDownRefresh": true, "onReachBottomDistance": 50 } 2：js响应方法（页面创建时已生成） /** * 页面上拉触底事件的处理函数 */ onReachBottom: func...

【微信小程序页面出现onReachBottom不触发的情况】

没落的博客

03-06

2882

无法触发的原因是：height设置为100vh,会导致滑动不会触底。修改一下css就会触发。

小程序onReachBottom上拉触底/下拉刷新没有反应问题（日常踩坑）

pirs123的博客

07-11

2904

今天踩了一个坑，因为改之前同事写的页面，新功能需要用到上拉刷新获取更多数据，当我加上onReachBottom时不管怎么上拉都没有效果后来发现给了整个页面固定高度，这就导致onReachBottom不触发了，其实还有很多导致onReachBottom不触发的，比如使用scroll-view处理不当也会导致onReachBottom不执行。虽然onReachBottom是自带的方法但是一定要写在methods里面才会触发的噢。下面是去掉固定高度的效果，触发了！

微信小程序，无法直接使用上拉手势定义自己的功能

Julse的博客

04-15

661

我想写一个上拉进行删除的操作，非上拉加载。但是无法直接使用上拉手势定义自己的功能，最后发现是因为内容没有填满整个页面，即：内容没有触底，无法调动上拉事件。解决办法是：将上拉事件绑定在组件上在Page的onReachBottom()函数中定义上拉触发的动作,官方对onReachBottom()的定义是监听用户上拉触底事件。可以在app.json的window选项中或页面配置中设置触发距...

微信小程序+上拉触底小案例

01-09

在这个“微信小程序+上拉触底小案例”中，我们将探讨如何在微信小程序中实现一个常见的交互功能——上拉触底加载更多。在移动应用中，上拉触底加载更多（Infinite Scrolling 或 Load More）是提高用户体验的一种...

微信小程序简单实现上拉触底onReachBottom数据分页请求

qq_51090530的博客

06-25

1291

实现思路：通过小程序上拉触底事件触发数据第二次请求，上拉触底一次请求分页页码加一，每次请求10条数据，在请求函数中通过函数来处理数据累加问题，为封装的小程序函数。页面结构主要实现代码如下：...

【微信小程序_15_下拉刷新与上拉触底】

爱吃凉拌辣芒果的博客

10-16

1086

本文介绍了微信小程序的两种页面事件 —— 下拉刷新事件和上拉触底事件，具体内容如下：（1）下拉刷新事件概念：通过手指下拉屏幕重新加载页面数据。启用方式：包括全局和局部开启，推荐局部开启。配置样式：可通过backgroundColor和backgroundTextStyle配置下拉刷新窗口样式。事件处理：在.js文件中用onPullDownRefresh()监听，处理完后需调用wx.stopPullDownRefresh()停止刷新。（2）上拉触底事件概念：通过手指上拉屏幕加载更多数据。

微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

10-15

其中，上拉加载功能是微信小程序中一种常见的功能实现，它允许用户通过上拉操作来获取更多的内容。在用户浏览到页面底部时，通过程序触发加载更多的数据，包括触底加载或点击加载更多数据。首先，实现微信小程序上...

微信小程序设置上拉触底事件onReachBottom()不生效，检查是不是自动生成的代码把自己写的代码覆盖掉了

weixin_54799350的博客

05-25

1173

如果调试发现事件未被触发，控制台也没有输出，检查当前页面的.js文件，自己写的函数和小程序开发者工具自动生成的代码是否重复的地方，删掉一处即可。创建项目时，微信小程序开发者工具会自动生成有关上拉触底事件的处理函数。

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

热门推荐

qq_43447509的博客

08-01

1万+

造成不触发的原因可能有以下几种情况配置属性问题高度问题滚动条不在顶部需要回到顶部重新计算高度 onReachBottom函数被覆盖 1.配置属性问题在app.json或者本页的json文件中配置onReachBottomDistance属性，区别在于全局还是只在本页生效 2.高度问题 //设置容器高度为100% page{ height: 100% } 3. 切换页面时滚动条滚回到顶部 //切换页面时调用API wx.pageScrollTo({ scrollTop: 0 }) 4.

微信小程序：onReachBottom(),onPullDownRefresh()事件不触发的原因

Queen-Shir的博客

11-29

7481

onReachBottom()下拉触顶：原因：页面上的内容没有超出文档的高度，当前页面没有滚动条，就不会触发上拉触底事件。上拉不了就不会触底。此时可以用滚动监听事件代替。 onPageScroll:function(e){ console.log(e.scrollTop); if (e.scrollTop>=92){ ...... } ...

微信小程序onReachBottom未触发

ARLENE2的博客

03-10

572

微信小程序onReachBottom未触发

微信小程序 - scroll-view组件之上拉加载下拉刷新（解决上拉加载不触发）

Qianmoer的博客

08-02

7686

/ 自己定义刷新事件 var self = this;// 自己定义刷新事件 self . setData({triggered : true , // 将triggered属性设置为true，表示下拉刷新已经被触发 }) wx . showToast({title : "刷新成功" }) setTimeout(function() {triggered : false , // 将triggered属性设置为false，表示下拉刷新已完成 }) console . log('下拉刷新已完成')

微信小程序上拉事件失效！！！！！！

qq_34286595的博客

06-06

3839

在上拉的时候，无发上拉以至于后面的加载不出来，这时你就要去看看你设置这个页面的图片个数有没有排满这个界面，个人建议吧这个count设置的值提高一点！！以保证上拉事件可以正常使用 ...

微信小程序=====》解决部分苹果机型屏幕无法滑动问题(底部黑条)

Willow_Spring的博客

07-29

2571

部分苹果机型的手机手势导航会导致小程序下方有一个小黑条，并且此时屏幕无法滑动，这时候给内容套一层scrollview即可，若是自定义的顶部底部导航栏，则用calc计算高度即可.。 scroll view必须给高度 calc(100vh - 100rpx) ...

小程序，fixed定位上拉加载下拉刷新不生效问题

qq_42859450的博客

06-19

944

问题描述：点击页面按钮展示遮罩层，在遮罩层上做上拉加载上来刷新数据

微信小程序下拉刷新真机没效果_微信小程序下拉刷新上拉加载(示例代码)

weixin_39880328的博客

12-22

401

1.下拉刷新小程序页面集成了下拉功能，并提供了接口，我们只需要一些配置就可以拿到事件的回调。1. 需要在 .json 文件中配置。如果配置在app.json文件中，那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中，那么就是对应的页面，可以下拉刷新。具体页面的.json文件：1 {2 "enablePullDownRefresh": true3 }app.json文件:1 "wind...

简述微信小程序如何实现上拉触底

11-14

在微信小程序中，实现上拉触底通常是在`scroll-view`组件上使用`bindtolower`事件。以下是基本步骤： 1. 首先，在需要滚动的内容区域添加`scroll-view`组件，并设置`scroll-y`属性为`true`，使其允许垂直滚动： ```html <scroll-view scroll-y="true" bindtolower="loadMoreData">  </scroll-view> ``` 2. 定义`loadMoreData`函数，在这个函数内部处理上拉触底的动作，如检查是否还有更多数据、向服务器请求新数据等： ```javascript Page({ data: { hasMore: true, // 初始设定是否有更多的数据 }, loadMoreData(e) { if (this.data.hasMore) { // 请求更多数据，这里只是一个示例，实际应用替换为网络请求 this.requestMoreData(); // 阻止默认的滚动行为，防止自动回滚 e.preventDefault(); } }, requestMoreData() { // 这里模拟成功获取更多数据后，更新hasMore的状态 setTimeout(() => { this.setData({ hasMore: false, // 表示已经到达了底部，没有更多数据了 }); }, 2000); // 假设数据加载延迟2秒 }, }) ``` 在这个例子中，当你拉动`scroll-view`到底部并释放手指时，`loadMoreData`会被触发。如果还有更多数据，则会发出请求，并阻止`scroll-view`自动回到顶部。如果没有更多数据，`hasMore`标志会变为`false`，告诉用户已达到列表底部。