微信小程序实现下拉刷新

一、设置微信小程序所有页面都可以下拉刷新

1、在app.json的"window"中进行配置

(1)把"backgroundTextStyle":"light"改为"backgroundTextStyle":"dark"

(2)添加"enablePullDownRefresh":true,开启下拉刷新。

1.在app.js中增加两个生命周期函数

javascript 复制代码
onPullDownRefresh:function(){
    this.onRefresh();
  },
onRefresh:function(){
    //导航条加载动画
    wx.showNavigationBarLoading();
    setTimeout(function () {
      wx.hideNavigationBarLoading();
      //停止下拉刷新
      wx.stopPullDownRefresh();
    }, 2000);
  },

二、设置微信小程序单独页面下拉刷新

1、首先在页面的json文件中添加设置:

"enablePullDownRefresh": true

javascript 复制代码
{             
  "usingComponents": {},
  "enablePullDownRefresh": true
}

2、在js文件中写一个onRefresh()生命周期:

javascript 复制代码
onRefresh:function(){
    //导航条加载动画
    wx.showNavigationBarLoading()
    //loading 提示框
    wx.showLoading({
      title: 'Loading...',
    })
    console.log("下拉刷新啦");
    setTimeout(function () {
      wx.hideLoading();
      wx.hideNavigationBarLoading();
      //停止下拉刷新
      wx.stopPullDownRefresh();
    }, 2000)
  },

3、在onPullDownRefresh()中调用上面写的函数:

javascript 复制代码
/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh:function(){
    this.onRefresh();
  },
相关推荐
低代码布道师5 小时前
少儿舞蹈小程序(7)打造您的“活”名片:动态展示机构实力
低代码·小程序
程序员陆通8 小时前
用 Cursor AI 快速开发你的第一个编程小程序
人工智能·小程序
鹧鸪云光伏与储能软件开发8 小时前
投资储能项目能赚多少钱?小程序帮你测算
运维·数据库·小程序·光伏·光伏设计软件·光伏设计
微三云-轩9 小时前
小程序:12亿用户的入口,企业数字化的先锋军
大数据·小程序·开源软件
低代码布道师9 小时前
少儿舞蹈小程序(8)校区信息后台搭建
低代码·小程序
2501_916008899 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915921439 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
—Qeyser13 小时前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
2501_9160088913 小时前
uni-app iOS 日志与崩溃分析全流程 多工具协作的实战指南
android·ios·小程序·https·uni-app·iphone·webview
Dark_programmer13 小时前
钉钉小程序 - - - - - 小程序内打开OA文档链接
小程序·钉钉