uni-app实现下拉刷新

这篇具有很好参考价值的文章主要介绍了uni-app实现下拉刷新。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

业务逻辑如下:

uni-app实现下拉刷新,uni-app

1.在滚动容器中加入refresher-enabled属性,表示为开启下拉刷新

uni-app实现下拉刷新,uni-app

2.监听事件,添加refresherrefresh事件

3.在事件监听函数中加载数据

4.关闭动画,添加refresher-triggered属性,在数据请求前开启刷新动画,在数据请求完成后关闭动画。

完整代码如下:

uni-app实现下拉刷新,uni-app

注意:如果不用await直接调接口,会导致数据加载顺序不确定,可能数据还没返回完就已经关闭动画。如果三个接口都加上await,则会等待第一个接口返回后再执行第二个接口,以此类推,延长了数据加载时间。

最优方案:用Promise.all()方法同时加载三个接口,配合async await,这样可以保证三个接口都返回后再执行下一步操作。文章来源地址https://www.toymoban.com/news/detail-850401.html

到了这里,关于uni-app实现下拉刷新的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app实现分页--(1)准备工作,首页下拉触底加载更多

    实现流程如下: 分析:需要在滚动容器中添加滚动触底,在猜你喜欢中获取数据。难点:如何在父页面调用子组件内的方法。父组件中用ref,并定义组件实例类型,子组件中暴露方法 具体代码如下: 1.在父组件中添加scrolltolower事件,用于调用子组件方法获取数据 2.给子组件添

    2024年04月11日
    浏览(35)
  • uni-app顶部下拉舒心

    操作步骤 基于 scroll-view 组件实现下拉刷新,需要通过以下方式来实现下拉刷新的功能。 配置 refresher-enabled 属性,开启下拉刷新交互 监听 @refresherrefresh 事件,判断用户是否执行了下拉操作 配置 refresher-triggered 属性,关闭下拉状态

    2024年01月24日
    浏览(28)
  • uni-app:刷新当前页面

    执行这三行代码就可以实现uniapp刷新当前页面。不论是tabbar还是page页面 * * * * * * * * * * * * * * * *

    2024年02月11日
    浏览(34)
  • uni-app 自定义下拉框

    如图:     html: view class=\\\"row-item\\\" view class=\\\"lable-tit\\\"性别:/view view class=\\\"selected-all\\\" view class=\\\"drop-down-box\\\" @click=\\\"btnShowHideClick\\\" text class=\\\"dropdown-content\\\"{{choiceContent}}/text image class=\\\"dropdown-icon\\\" src=\\\"/static/down.png\\\" mode=\\\"widthFix\\\"/image /view  view class=\\\"dialog-view\\\" v-if=\\\"isShowChoice\\\" text :class=\\\"choiceI

    2023年04月19日
    浏览(29)
  • uni-app中select下拉菜单

    select-lay - DCloud 插件市场

    2024年02月12日
    浏览(26)
  • 前端vue uni-app仿美团下拉框下拉筛选组件

    在前端Web开发中,下拉筛选功能是一种非常常见的交互方式,它可以帮助用户快速选择所需的选项。本文将介绍如何利用Vue.js和uni-app框架来实现一个高效的下拉筛选功能。通过使用这两个强大的前端框架,我们可以轻松地创建具有响应式用户操作的下拉筛选组件。 首先,我

    2024年02月09日
    浏览(33)
  • uni-app返回上一个页面并进行页面刷新

    适用两个不同的页面跳转,返回上一个页面保存并刷新修改后的数据(也解决了uni-app的navigateBack返回不刷新的方法之一) 当前页: 上一页: 思路: 1、用getCurrentPages()获取打开的页面 2、保存当前页面和上一个页面 提示:不确定是不是从当前页跳转到上一页就console.log(pages[pa

    2024年02月12日
    浏览(34)
  • uni-app封装省市区下拉组件(后台获取数据)

    一.后台数据格式  PROCINCE:[{itemName:\\\'\\\',itemValue:\\\'\\\'}] CITY:[{itemName:\\\'\\\',itemValue}] AREA:[{itemName:\\\'\\\',itemValue}] 前端将地址数据缓存在了pinia中 前端主要使用picker进行勾选 二.代码

    2024年02月12日
    浏览(39)
  • uni-app:切换页面刷新,返回上一页刷新(onShow钩子函数的使用)

    切换页面刷新:通过onShow()便可实现 返回上一页通过uni.navigateBack({delta: 1});实现 以返回上一页刷新为例 在A页面写入方法refreshHandler() 在A页面写入onLoad(),onShow()  onLoad(): 首次进入页面时执行的方法,这里直接引入refreshHandler() 可以直接查询到页面数据 onShow(): 进入页面执行

    2024年02月15日
    浏览(44)
  • uni-app 微信小程序刷新token,无感登录

    描述:         后端token每5分钟刷新一次,需要给注册过的用户无感登录,当接口403或401后,刷新token并且重新发起所有403或401请求 我的实现  参照: 参照链接uniapp+uview(luch-request)无痛刷新token - 掘金 (juejin.cn)

    2024年02月15日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包