uniapp监听下滑到底部时判断

最新推荐文章于 2024-09-08 09:54:12 发布
最新推荐文章于 2024-09-08 09:54:12 发布
阅读量1.2w 收藏 11
点赞数 7
分类专栏： uniapp下滑监听 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thigh_d/article/details/107362170
版权

每下滑到底部调用一次后端接来监听

给当前页数默认设为第一页
给

在这里插入图片描述
监听页数大于多少页时，显示已是最后一页
在这里插入图片描述

调用接口判断是否执行，滑动到底部时，自动触发一次接口数据，直到滑动到最后一页
在这里插入图片描述

另一种情况是通过后台的page_total的数量来比较，大于时显示最后一页
在这里插入图片描述
在这里插入图片描述

小伙伴又更多的方法可以分享出来，一起进步~

经过一段时间，我又发现了一种更有效的下拉监听的方法
话不多说，上代码---->
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这个方法应该是很实用的

thigh_d
关注
专栏目录
uniapp [全端兼容] - 详细实现列表上拉懒加载及“到底了“功能示例，数据列表下拉滑动页面触底后请求接口懒加载数据，自动计算分页/总条数、判断分页懒加载是否继续请求接口数据，以及数据没有了提醒！
王佳斌
10-07 3950
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，列表，懒加载，触底加载，上拉页面触发加载，列表懒加载如何判断是否还需要继续请求接口，如何知道数据加载已经没有了停止继续请求，分页判断，列表滚动触底更新实现，页面滚动到底部后请求数据填充到data中，小程序上拉加载和下拉刷新，如何分页加载数据，实现上拉加载功能示例加载更多数据/触底加载/点击加载更多数据，数据分页请求，onReachBottom()，不生效，不触发的情况，列表下拉加载判断是否到底了，我是
uniapp页面滚动监听
热门推荐
李白
03-09 1万+
先在前面总结下，下面一共有3种监听滚动的方法。 昨天在做uniapp的图片懒加载，从网上找了个插件，导入到HBuilderX后，捣鼓了一晚上，总算是正常跑起来了。 今天早上，把代码copy到项目上，结果只有第一屏的图片能展示，滑动后，下面的图片都不显示了！-_-! 因为有了昨晚的经验，很快就定位到问题是滚动监听出现了问题。 这个插件的图片懒加载一个关键的地方就是用到滚动监听。 第一种 在普通页面可以用生命周期的“onPageScroll”方法，如下： onPageScroll(e) { // 传入scro
uniapp监测滚动到底部加载下一页的数据。
2301_77742545的博客
12-06 2029
思路就是首先判断当前页有没有大于总页数，大于总页数就提示，小于就调用接口加载下一页，这样的写法是为了避免发出没有必要的请求。console.log('触底了', this.FormData.page);uniapp有检测滚动到·底部的API onReachBottom。title: '最后一页了',
uniapp如何监听页面滚动？
最新发布
weixin_56187723的博客
09-08 834
函数会在页面滚动时触发，你可以在这个函数中获取到当前页面的滚动位置等信息。请根据你的具体需求选择适合的方法来监听页面或组件的滚动事件。在uni-app中，监听页面滚动主要通过在页面的。生命周期函数来实现。
uni-app判断是否到底部
qq_34605417的博客
06-28 2480
【代码】uni-app判断是否到底部。
uniapp-scroll-view自动定位到元素底部
wuqingdepiaoke的博客
07-14 2813
定义id，通过id获取元素节点的信息，因为会有上面注释的问题，所以我们把两种情况结合起来使用。scrollview每次获取信息之后自动顶到最下面，类似于聊天框的模式。首先我们需要拿到的是我们需要将信息框定位到那里，怎么获取这个数据呢。scrollview的属性，可以参考uniapp文档查看。1.配合id可以取到相应的元素信息，然后修改this.每次进入页面打开的时候都定位到最下面,使用这个方法.可以在生命周期中使用。在data中定义scroll属性。...
uni-app使用scroll-view实现锚点定位和滚动监听功能
taozi8957的博客
05-19 6191
uni-app使用scroll-view实现锚点定位和滚动监听功能
uniapp在子组件监听滚动到底部事件
牛马程序员进阶之路
05-30 1411
uniapp在子组件监听滚动到底部事件
uniapp监听服务器消息,请问环信的技术人员 移动端mui框架，app后台运行，使用addEventListener监听消息异常...
weixin_34450486的博客
08-04 1404
使用plus.push.addEventListener("receive", function(msg) {接受消息服务器消息 ，app后台运行接收不到消息，没有提示，是因为和你们的服务器断开连接导致的吗还是app登录状态过期导致的呢？然后就是，咱们这个环信服务器是可以通过某种技术直接传递到app上，使app直接接受，不经过服务器后台处理的吗，项目这是前同事写的，很多东西不是很清楚，描述可能不到...
js监听滚动到底部
github_37759996的博客
11-16 1148
滚动底部
微信小程序在其他页面监听globalData中值的变化
01-03
3、如果在app.js执行登录部分的代码，由于时序问题，如何处理其他页面请求时未获取到身份识别标记的情况。（session，userid等）。（大意是：怎么能够保证其他页面请求是在登录之后？） 知识点 有经验的同学可能一...
uniapp如何监听页面滚动
cccbbbmmm的博客
12-08 7286
2.使用组件的事件监听： 如果你的页面中包含有滚动的组件（例如scroll-view），你可以使用组件的事件监听来监听页面滚动事件。具体的事件名称和使用方法可以参考对应组件的官方文档。在UniApp中，你可以使用页面生命周期函数和组件的事件监听来监听页面滚动。以上是两种常用的监听页面滚动的方法，请根据你的具体需求选择适合的方式进行实现。
vue,uniapp如何监听是否到达底部？
Leijiang0504的博客
05-11 1025
onReachBottom(){ console.log("加载数据的方法"); }, 这个就可以了
uniapp项目中监听用户的下拉刷新事件
weixin_72503508的博客
03-21 853
3. 在 获取数据的函数中 通过 cb 接收回调并使用。
uniApp实现Tab切换，及监听滚动设置Tab固定，Tab内容可滚动
qq_41429765的博客
06-16 3292
1.实现tab切换调用,使用插件TABS,此插件使用了Stylus预处理， 问题：需要下载使用，问题其中有
uni-app：触底事件使用
我是小鹏呀的博客
03-04 3052
1.在项目的pages.json文件找到需要添加触底事件的页面，添加onReachBottomDistance（页面底部的触发距离）需求：需要滑到底部，加载更多数据，不想使用分页组件，实现触底加载。解决方法：使用页面滚动到底部的事件onReachBottom()2.在页面调用onReachBottom()
UniApp中给固定盒子监听触底事件
qq_44684550的博客
11-24 794
【代码】UniApp中给固定盒子监听触底事件。
uniapp触底加载
waterwo的博客
03-15 9713
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、onReachBottom()函数首先，在page.json的style下设置然后在页面使用即可，与生命周期函数同一级别二、在子组件中使用滚动区域scrow-view触底加载1.添加scroll-view组件2.设置height3.在methods方法中写入触底加载的业务逻辑 一、onReachBottom()函数 首先，在page.json的style下设置 "pages": [ { "path": "page.
uniapp上下滑动刷新数据
09-12
在UniApp中，你可以使用 `scroll-view` 组件来实现上下滑动刷新数据的功能。以下是一个简单的示例代码： ```html <template> <view> <scroll-view class="scroll-view" scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" refresher-enabled="{{refresherEnabled}}" refresher-threshold="{{refresherThreshold}}" refresher-default-style="{{refresherDefaultStyle}}" refresher-background="{{refresherBackground}}" bindrefresherrefresh="refresh" > <!-- 数据列表 --> <view class="list"> <view class="item" wx:for="{{list}}"> {{item}} </view> </view> </scroll-view> </view> </template> <script> export default { data() { return { list: [], // 列表数据 refresherEnabled: true, // 是否开启下拉刷新 refresherThreshold: 50, // 下拉刷新阈值 refresherDefaultStyle: "black", // 刷新控件样式，支持 black、white，默认为黑色 refresherBackground: "#f8f8f8" // 刷新控件背景颜色，默认为 #f8f8f8 }; }, methods: { upper() { // 上滑刷新处理函数 // 发送请求获取新数据，更新列表数据 // 示例中使用 setTimeout 模拟异步请求 setTimeout(() => { this.list = ["新数据1", "新数据2", "新数据3", ...]; }, 1000); }, lower() { // 下滑加载更多处理函数 // 发送请求获取更多数据，更新列表数据 // 示例中使用 setTimeout 模拟异步请求 setTimeout(() => { this.list = [...this.list, "更多数据1", "更多数据2", "更多数据3", ...]; }, 1000); }, refresh() { // 刷新处理函数 // 发送请求重新获取数据，更新列表数据 // 示例中使用 setTimeout 模拟异步请求 setTimeout(() => { this.list = ["刷新后的数据1", "刷新后的数据2", "刷新后的数据3", ...]; }, 1000); } } }; </script> <style> .scroll-view { height: 100vh; } .list { margin-top: 20px; } .item { height: 100px; line-height: 100px; text-align: center; border-bottom: 1px solid #ccc; } </style> ``` 在上面的示例中，我们使用了 `scroll-view` 组件来实现滚动的效果，并通过设置 `scroll-y` 属性来开启垂直滚动。通过设置 `bindscrolltoupper` 和 `bindscrolltolower` 来监听滚动到顶部和底部的事件，并触发对应的处理函数。通过设置 `refresher-enabled` 属性为 `true` 开启下拉刷新功能，并设置其他相关属性来自定义下拉刷新样式。在对应的处理函数中，你可以发送请求获取新的数据并更新列表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值