uni-app对 下拉刷新 和 上拉加载更多 功能的实现

最新推荐文章于 2024-06-12 11:19:00 发布
最新推荐文章于 2024-06-12 11:19:00 发布
阅读量1.4k 收藏 6
点赞数 2
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Z18834071903/article/details/108471544
版权

uni-app对 下拉刷新 和 上拉加载更多 功能的实现

上拉加载更多 与 加载到最底部的提示：监听触底行为 ，在事件中累加页码，获取商品列表数据
在这里插入图片描述

保留之前的数据（this.goods是原有数据，res.data.message是新加载的数据）
在这里插入图片描述

添加view组件，提示“我是有底线的”，没有数据时提示，用v-if等于布尔值来判断底部提示显示与否，默认为false
在这里插入图片描述

在监听事件中判断布尔值为真或假，判断商品的length是否小于页码乘以每页数据的长度，如果小于直接return ，布尔值为true
在这里插入图片描述

下拉刷新：首先在pages.json文件中开启下拉刷新事件，注意：不要在globalStyle中全局开启，在需要的页面开启就行
在这里插入图片描述

然后注册触发下拉刷新事件，在事件中请求第一页的数据，把列表页变为空，隐藏底部提示，在重新获取列表页（调用获取列表数据的方法）。请求数据时先变为空，请求延时一秒钟，在获取数据，数据刷新完成，关闭刷新按钮的提示（在获取数据列表时传递一个回调函数关闭提示）
在这里插入图片描述

并且在获取数据列表页方法中接收这个回调函数，判断一下有这个函数就调用它，没有就不调用
在这里插入图片描述

盐多碧咸。。
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app上拉加载，下拉刷新
ylp的博客
02-25 2万+
文件路径根据自己的项目进行修改，里面涉及的上拉加载更多的uni-load-more.vue组件，到官方组件里下载使用。 需要在pages.json里配置 { "path": "pages/news/news", "style": { "navigationBarTitleText": "新闻中心", "enablePullDownRefresh": true }
【z-paging下拉刷新、上拉加载】示例demo
07-26
【配置简单】仅需两步（绑定网络请求方法、绑定分页结果数组）轻松完成完整下拉刷新，上拉加载更多功能。 【低耦合，低侵入】分页自动管理。在page中无需处理任何分页相关逻辑，无需在data中定义任何分页相关变量，...
uni-app下拉刷新、上拉加载更多实现
热门推荐
龙衣
07-17 2万+
下拉刷新 下拉刷新文档 在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh:true。 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷...
uniapp 底部加载更多
最新发布
mind_me的博客
06-12 306
如果是需要实现触底分页的查询，需要判断逻辑，是否到达最后一页，有多种实现方式，这里我的逻辑是，在页面中添加一个全局变量，包含分页的页码、页大小、是否可以继续请求数据，在请求之前先判断是否可以继续请求，不需要则不请求，以下是全局变量参数。具体的逻辑根据自己的需求修改，大原则就是判断是否可以请求数据和分页页码的递增；
uniapp二次开发uni-scroll-view下拉刷新和上拉加载更多的功能
csdndddsd的博客
11-15 854
在pages目录下选择你需要添加下拉刷新功能的页面，打开该页面的vue文件。这样，我们就完成了上拉加载更多功能的实现。这样，我们就完成了下拉刷新功能的实现。4、上拉加载更多功能的实现。1、下拉刷新功能的实现。
上拉加载更多和下拉刷新（uni-app）
qq_38779317的博客
09-07 514
// 上拉加载更多数据 // 1. 打开项目根目录中的 pages.json 配置文件, 为需要上拉加载更多页面配置上拉触底距离, 如下: "pages": [{ "path": "pages/index/index", "style": { "onReachBottomDistance": 150 //滚动页面到距离底部150px时，就会触发onReachBottom事件 } }] // 2. 在上面的页面中, 和 methods 节点平级, 声明 onReachBottom 事件
uniapp实现触底加载更多
qq_51130780的博客
06-04 2513
还有一点处理小技巧，如果我们通过触底来将分页中的当前页++的话，可能就会出现用户触底后会滚又触地，导致我们请求没返回又发送相关请求，从而导致页面数据出错。因为虽然目前可能软件或者项目中的数据不多，可能也就十多行，但是如果随着项目的不断扩大，其对应的数据也成百上千的增加，如果我们还是按照原来那样一次性的将所有数据请求回来。如果用于实际项目中的话，我们可以将对应的下拉刷新所添加的数据转化为真实数据。当用户滚动到页面底部时，自动加载下一页数据，实现无缝的数据展示，使用户可以连续浏览数据而无需手动触发加载操作。
uni-app：mescroll-nui下拉刷新组件
09-08
6. **自定义样式与内容**：mescroll-nui允许开发者自定义下拉刷新和上拉加载的显示内容和样式，可以通过修改内置的模板或提供自己的模板来实现个性化设计。 7. **异常处理**：在某些情况下，如网络错误或无更多数据...
5种uni-app 页面下拉刷新方法-源码示例.zip
01-31
在uni-app中，页面的下拉刷新功能是用户界面交互中常见且重要的一个部分，它通常用于加载更多数据或更新内容。本资料"5种uni-app 页面下拉刷新方法-源码示例.zip"提供了五种不同的实现方式，让我们详细探讨这些方法...
uniapp实现下拉刷新及上拉加载更多的完整代码（app，H5，小程序均可使用）
11-14
内容概要：uniapp实现下拉刷新及上拉加载更多的完整代码（app，H5，小程序均可使用），下载后解压，使用HBuilder导入项目即可运行。 适合人群：少许编程基础人员即可. 适应场景：需要使用uniapp开发移动端时，涉及...
uniapp基于z-paging实现页面下拉刷新、上拉加载，分页加载案例
11-19
它通过监听用户的滚动事件，自动触发下拉刷新和上拉加载更多数据的动作。这使得开发者无需手动处理滚动细节，从而集中精力于业务逻辑。 在实现这个案例时，我们需要以下几个关键步骤： 1. **安装z-paging插件**：...
uniapp新闻列表-上拉刷新-下拉加载更多.zip
12-08
1、使用uniapp编写。 2、新闻列表。 3、上拉刷新。 4、下拉加载更多。 5、图片在左，文字在右。
uniapp之列表加载更多数据
意初的博客
12-27 1043
触发事件onreachbottom，和onLoad等生命周期同级，页数加载时将变量传给接口再返回页数。 if (this.page >= this.total) { console.log('判断当前页数是否大于等于总页数')
uniapp 上拉加载更多 和下拉刷新
localhost
07-18 507
uniapp 上拉加载更多 和下拉刷新
小程序-uni-app：scroll-view/区域滚动、下拉刷新、上拉加载更多
snowball的博客
07-24 6245
开发环境：小程序、uniapp + vue3 + ts实现功能：列表页面实现，区域滚动、下拉刷新、上拉加载更多，效果如图：正常：下拉刷新：
【uniapp】上拉触底加载更多的两种方式,组件里面和页面里面 scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头
$
02-20 7887
scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头
uniapp简单实现下拉刷新和上拉加载更多，uni-app实现上拉加载更多
weixin_43992507的博客
03-13 1776
uniapp简单实现下拉刷新和上拉加载更多，uni-app实现上拉加载更多
uniapp下拉刷新列表上拉加载更多方案
一个有节操的码农
01-08 732
【代码】uniapp下拉刷新列表上拉加载更多方案。
uniapp上拉加载 加载更多 uni-load-more组件使用
Champagne_7的博客
09-01 5257
uni-app 上拉加载 使用uni-ui 的 LoadMore 组件_uni-load-more 上拉没反应_O3ohn的博客-CSDN博客。上拉加载的时候 如果没有更多则不加载数据 否则 page ++ 然后获取第二页的数据。判断数据的长度是否小于 我们需要的长度 如果小于 那就是没有更多数据。1、给渲染的数据加上滚动加载 和 uni-load-more 组件。4、接收数据 如果页码为1 则直接赋值 否则 加上之前的数据。原创链接 在基础上做修改。3、加上下拉刷新和上拉加载。
uni-app vue3 具备上滑加载下拉刷新的列表页面
04-29
是的，uni-app支持上滑加载和下拉刷新功能。你可以使用uni-app提供的组件`uni-scroll-view`来实现上滑加载和下拉刷新功能。下面是一个简单的例子： ```vue <template> <uni-scroll-view class="list" :enable-back-to-top="true" :scroll-top="scrollTop" :lower-threshold="50" @scrolltolower="loadMoreData" @scrolltoupper="refreshData" > <div v-for="(item, index) in list" :key="index">{{ item }}</div> </uni-scroll-view> </template> <script> export default { data() { return { list: [], scrollTop: 0 }; }, mounted() { // 初始化数据 this.loadData(); }, methods: { // 加载数据 loadData() { // 请求数据... // 将数据添加到列表中 this.list.push(...data); }, // 刷新数据 refreshData() { this.scrollTop = 0; this.list = []; this.loadData(); }, // 加载更多数据 loadMoreData() { this.loadData(); } } }; </script> ``` 在上面的例子中，我们使用`uni-scroll-view`组件来实现滚动和上滑加载下拉刷新功能。`lower-threshold`属性设置了滑动到底部时触发`scrolltolower`事件，这里设置为50，表示距离底部还有50像素时触发事件。`scrolltoupper`事件表示滑动到顶部时触发，这里我们调用`refreshData`方法来刷新数据。同时，我们使用`scrollTop`属性来控制滚动到顶部时的位置。 以上是一个简单的例子，你可以根据实际需求来调整代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值