微信小程序-上拉加载和下拉刷新

一.上拉加载

微信小程序的上拉加载使用onReachBottom(),写在.js文件里面的Page方法里面。

复制代码
onReachBottom(){
    //上拉自动更新到4,5,6
    wx.showLoading({
      title: '数据加载中...',
    })
    setTimeout(()=>{
      const lastNum=this.data.numList[this.data.numList.length-1]
      const newAry=[lastNum+1,lastNum+2,lastNum+3]
      this.setData({
        numList:[...this.data.numList,...newAry]
      })
      wx.hideLoading()
    },1500)
  }

onReachBottom()会监听微信小程序上拉操作。

需要在.json文件里面配置"onReachBottomDistance"属性。

如下面的代码,在距离底部50px的时候会触发到onReachBottom()

复制代码
"onReachBottomDistance": 50px

二.下拉刷新

下拉刷新使用onPullDownRefresh()

复制代码
  onPullDownRefresh(){
    //下拉刷新后,显示1,2,3
    this.setData({
      numList:[1,2,3]
    })
    if(this.data.numList.length === 3){
      wx.stopPullDownRefresh()
    }
  }

注意,在使用onPullDownRefresh() 的时候,需要及时使用wx.stopPullDownRefresh()进行关闭,不然可能会长时间显示刷新状态

相关推荐
zoahxmy092917 分钟前
微信小程序 request 流式数据处理
微信小程序
人人题1 小时前
汽车加气站操作工考试答题模板
笔记·职场和发展·微信小程序·汽车·创业创新·学习方法·业界资讯
曲江涛3 小时前
微信小程序 webview 定位 并返回
微信小程序·小程序
weixin_440470503 小时前
部署Dify接入微信验证反代根目录创建一个文件通过微信小程序验证
微信小程序·腾讯云
27669582924 小时前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿
web_Hsir5 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir5 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa6 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
Angus-zoe6 小时前
微信小程序唤起app
微信小程序·小程序
不老刘8 小时前
微信小程序使用 Vant Weapp 组件库教程
微信小程序·小程序·vant