uniapp小程序给指定的页面新增下拉刷新功能

这篇具有很好参考价值的文章主要介绍了uniapp小程序给指定的页面新增下拉刷新功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:有些页面需要实时更新数据,但是又不能做实时刷新,所以给用户一个手动下拉刷新指定接口的功能

第一步:在pages.json给页面加"enablePullDownRefresh": true配置

uniapp小程序给指定的页面新增下拉刷新功能,uni-app,小程序

第二步:在指定页面写onPullDownRefresh方法,和methods同级 

onPullDownRefresh() {
    //加个定时器1秒后关闭刷新
    setTimeout(() => {
	    uni.stopPullDownRefresh();
	}, 1000);
	//下拉刷新重新调用接口
	this.getAreaeatil()
},

然后就没有然后了!

 文章来源地址https://www.toymoban.com/news/detail-847423.html

到了这里,关于uniapp小程序给指定的页面新增下拉刷新功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 小程序 uniApp 下拉刷新 上拉加载

    在小程序和uniapp 中 可以通过 scrooll-view / 这个组件来实现 下拉刷新 和 上拉加载的功能 。官方文档 通过配置 scroll-x 和 scroll-y 可以实现 横向 或纵向的滚动 下拉刷新 配置 refresher-enabled 开启自定义下拉刷新 配置 refresher-triggered 设置下拉刷新的状态 (true 表示下拉刷新已经被触

    2024年02月05日
    浏览(53)
  • 【微信小程序】-- 页面事件 - 下拉刷新(二十五)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月02日
    浏览(47)
  • 【微信小程序】下拉刷新功能实现

    微信小程序开发系列 在开发微信小程序中经常会需要下拉页面进行更新要页面数据的功能,微信小程序提供了onPullDownRefresh函数。该函数作用是监听用户下拉动作。 监听用户下拉刷新事件。 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh: 可以通过wx.startPullD

    2024年02月12日
    浏览(47)
  • 实现微信小程序下拉刷新功能

    方法一:全局设置下拉刷新功能      1、在app.json的\\\"window\\\"中进行配置         (1)把\\\"backgroundTextStyle\\\":“light\\\"改为\\\"backgroundTextStyle”:“dark”         (2)添加\\\"enablePullDownRefresh\\\":true,开启下拉刷新。       2、在app.js中增加两个生命周期函数   方法一:全局设置下拉刷新

    2024年02月13日
    浏览(44)
  • 微信小程序页面事件,下拉刷新事件和上拉触底事件

    下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。 开启下拉刷新有两种方式:全局和局部。一般的话是开启局部下刷新,哪里用到哪里开。 全局开启下拉刷新 ● 在 app.json 的 window 节点中,将 enablePullDownRefresh 设置为

    2024年02月16日
    浏览(46)
  • 实现微信小程序中的下拉刷新功能

    在微信小程序中,可以通过在 scroll-view 组件上添加 enablePullDownRefresh 属性来启用下拉刷新功能。同时需要在页面的 .json 文件中设置 backgroundTextStyle 和 onPullDownRefresh 两个属性。 具体步骤如下: 1.在页面的 .json 文件中添加 enablePullDownRefresh、backgroundTextStyle 和 onPullDownRefresh 三个

    2024年02月12日
    浏览(43)
  • ⑥微信小程序--》小程序全局配置和详解下拉刷新和上拉触底页面事件

    目录 🏍️全局配置-window 🍇window小程序窗口的组成部分 🍇window节点常用的配置项 🍈window导航栏相关设置 设置导航栏标题 设置导航栏背景颜色  设置导航栏的标题颜色  🍉window下拉刷新  设置全局下拉刷新功能   设置下拉刷新的窗口背景色  设置下拉刷新的loading样式 

    2024年02月19日
    浏览(44)
  • uni-app小程序刷新当前页面的两种方法

    方法一 wx.relaunch来刷新当前页面,页面会被重载,若路由携带参数需自行拼接,方法如下 (如果用电脑打开小程序,该方法有bug) 上面是获取页面路由和参数的方法,具体使用如下 方法二(推荐) 通过获取该页面实例执行其内部的生命周期方法来刷新页面

    2024年02月12日
    浏览(53)
  • uni-app实现下拉刷新

    业务逻辑如下: 1.在滚动容器中加入refresher-enabled属性,表示为开启下拉刷新 2.监听事件,添加refresherrefresh事件 3.在事件监听函数中加载数据 4.关闭动画,添加refresher-triggered属性,在数据请求前开启刷新动画,在数据请求完成后关闭动画。 完整代码如下: 注意:如果不用

    2024年04月13日
    浏览(63)
  • uni-app小程序uni.navigateBack返回上一个页面并传递参数.返回上个页面并刷新

    返回上一个打开的页面并传递一个参数。有种办法就是使用 假如从B页面返回A页面: 经过测试,在uni.app中使用B页面使用setData设置A页面参数无法实现(应该是被更改为常量属性了)。 打印console.log(prevPage)前一页面对象可得: 方法1:我们可以使用A页面原有方法 B页面传递:

    2024年02月16日
    浏览(59)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包