uniapp + Vue3 版本下拉刷新

已于 2023-05-18 11:08:10 修改
阅读量297 收藏 2
点赞数
文章标签： uni-app vue.js 前端
于 2023-05-18 10:27:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52373373/article/details/130741477
版权

效果

代码 

先在pages.json加入如下代码

 然后要使用的页面

前端婴幼儿
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app使用scroll-view自定义下拉刷新(vue3+ts)
m0_60708088的博客
07-04 2025
uni-app使用scroll-view自定义下拉刷新(vue3+ts)
uniapp + vue3 + TypeScript + pinia + uviewplus
11-03
uniapp + vue3 + TypeScript + pinia + uviewplus
uni-app下拉刷新，获取数据后停止刷新
weixin_42674490的博客
07-07 2349
一.在pages.json该页面打开下拉刷新 "path": "pages/goods/goods", "style": { "navigationBarTitleText":"商品列表", "enablePullDownRefresh":true } 二.下拉刷新的具体实现 方法1 在onPullDownRefresh使用数据刷新，由于getGoodsList()添加了async,因此返回的是Promise,可以使用.then()执行接下来的停止刷新的操作。具体async详细解释：跳
nui-app 实现下拉刷新、上拉加载更多、页面滚动刷新、一键滚动到顶部等诸多功能
7c
07-26 2408
z-paging是一个uni-app的分页组件。全平台兼容，支持自定义下拉刷新、上拉加载更多，支持虚拟列表，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化等等。.........
uniapp vue3下拉刷新
TAITAI的博客
07-17 902
编写代码：代码片段.....})
uni-app中vue3+setup实现下拉刷新、上拉加载更多效果
ab的博客
11-22 2019
uni-app中setup函数实现上拉加载，下拉刷新函数
uniapp使用onPullDownRefresh实现页面下拉刷新
爬楼梯的前端小白的博客
07-08 1万+
uniapp使用onPullDownRefresh实现页面下拉刷新
uniapp几种实现下拉刷新的方式
热门推荐
C1091045324的博客
11-23 2万+
uniapp几种实现下拉刷新的方式
uni-app：实现页面的下拉刷新功能
weixin_46162592的博客
09-08 6054
记录一下在uni-app中实现页面下拉刷新的功能
uniapp和uview组件实现下拉触底刷新列表
青烟小生的博客
07-14 3045
以上示例使用了uView的LoadMore组件来实现下拉触底刷新列表，你可以根据自己的需求进行修改和调整，如改变请求的接口地址和参数，修改列表的渲染方式等。Hbuilder X 的插件市场进行引入使用，详情请看官网（建议使用）7、在生命周期添加下面内容。
vue3+uni-app上拉分页下拉刷新
m0_59642018的博客
12-06 816
页面引入onReachBottom(上拉), onPullDownRefresh(下拉)加上"enablePullDownRefresh": true这个一句即可。通过接口获取数据总条数后，使用onReachBottom（上拉）完成分页。
uniapp+vue3+pinia框架（模块化+持久化存储）
06-15
uniapp+vue3+pinia框架 uniapp：导航栏双页切换 vue3+pinia：实例化+参数输出+方法调用+模块化+持久化存储 购买后任何问题请私信沟通或添加技术服务群咨询。
uniapp + vue3 +vite + ts + pinia 框架模板
01-31
uniapp + vue3 +vite + ts + pinia 框架模板 包含登录 + 注册 + 修改密码 + tab页
uniapp+vue3+unocss示例，解压即用 已经各种配置好了的模板，导入Hbuilder课直接运行
最新发布
02-22
除去的安装配置繁琐操作，直接解压导入HbuilderX就可以用，完全可以直接当初始unocss项目。 vite.config.js、unocss.config.js、main.js已经配置好，其中主题在unocss.config.js可以随意更改成自己喜欢的样式。...
基于 Uniapp + Vue3 + Typescript 的移动端跨平台快速开发脚手架
02-27
Vue3 前端框架，组合式 API Typescript 在 JavaScript 的基础上添加静态类型。 Vite3 前端工具链 vk-uview-ui 支持 Vue3 的 uview 组件库 Pinia 状态管理 VueUse 基于 Composition API的实用函数集合、hooks。...
uni小程序上拉加载下拉刷新实现
qq_41906802的博客
07-04 643
uni小程序+ts+vue3实现上拉加载下拉刷新
uniapp使用自带【刷新方法】与使用【scroll-view】实现下拉刷新上拉加载
weixin_43973909的博客
02-17 1万+
uniapp使用自带【刷新方法】与使用【scroll-view】实现下拉刷新上拉加载
【uni-app从入门到实战】下拉刷新、上拉加载
Errol's Blog
08-16 2425
【uni-app从入门到实战】下拉刷新、上拉加载
uniapp使用Vue3上拉加载下拉刷新
05-20
在UniApp中，可以使用uni-scroll-view组件实现上拉加载和下拉刷新的功能。 首先，在页面中引入uni-scroll-view组件： ```vue <template> <uni-scroll-view class="scroll-view" :enable-back-to-top="true" :scroll-y="true" :lower-threshold="20" :upper-threshold="20" :refresher-enabled="true" :refresher-threshold="45" :refresher-default-style="true" @scrolltolower="loadMoreData" @refresherrefresh="refreshData"> <!-- 内容区域 --> </uni-scroll-view> </template> ``` 其中，`:scroll-y="true"`表示支持纵向滚动，`:lower-threshold="20"`表示距离底部多少距离时触发上拉加载，`:upper-threshold="20"`表示距离顶部多少距离时触发下拉刷新，`:refresher-enabled="true"`表示启用下拉刷新功能，`:refresher-threshold="45"`表示下拉刷新的临界值，`:refresher-default-style="true"`表示使用默认的下拉刷新样式。 在`<uni-scroll-view>`标签中的内容区域，可以放置展示数据的列表或其他组件。 然后，在页面的script中，编写下拉刷新和上拉加载的方法： ```vue <script> export default { data() { return { dataList: [], // 数据列表 page: 1, // 当前页码 pageSize: 10, // 每页条数 isLoadMore: false, // 是否正在加载更多数据 isRefresh: false // 是否正在下拉刷新 } }, methods: { // 加载更多数据 loadMoreData() { if (this.isLoadMore) { return } this.isLoadMore = true this.page++ // 调用加载数据的接口获取数据 // 将获取到的数据添加到dataList中 // 加载完成后，将isLoadMore设为false }, // 下拉刷新数据 refreshData() { if (this.isRefresh) { return } this.isRefresh = true this.page = 1 // 调用加载数据的接口获取数据 // 将获取到的数据替换dataList中的数据 // 刷新完成后，将isRefresh设为false } } } </script> ``` 在loadMoreData方法中，首先判断是否正在加载更多数据，如果是，则不再执行加载数据的操作。然后将isLoadMore设为true，表示正在加载更多数据。接着，调用加载数据的接口获取数据，并将获取到的数据添加到dataList中。最后，将isLoadMore设为false，表示加载完成。 在refreshData方法中，同样需要判断是否正在下拉刷新。然后将isRefresh设为true，表示正在刷新数据。接着，将页码设为1，表示刷新第一页数据。调用加载数据的接口获取数据，并将获取到的数据替换dataList中的数据。最后，将isRefresh设为false，表示刷新完成。 这样就实现了基于Vue3的UniApp上拉加载和下拉刷新功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值