uniapp实现上拉加载和下拉刷新

本是古典 何须时尚 2023-03-06 03:53 110阅读 0赞

下拉刷新onPullDownRefresh

需要先在pages.json中开启下拉刷新

  1. //在pages.json中找到需要开启的页面. 在style中输入
  2. "enablePullDownRefresh": true,

开启下拉刷新之后, 下拉对应的页面就会出现下拉的动画, 但是动画不会自动关闭, 所以手动关闭

  1. onPullDownRefresh () { 
  2.     //刷新初始化数据
  3.     this.size = 10
  4.     this.current = 1 
  5.     //调用获取数据的函数
  6.     this.getData() 
  7.     //关闭刷新动画
  8.     setTimeout(function () { 
  9.         uni.stopPullDownRefresh() 
  10.     }, 1000)
  11. },

上拉加载 onReachBottom

每次上拉时往数组中多扔一组数据

  1. const SIZE = 10
  2. data(){ 
  3.     return { 
  4.         size: 10,
  5.         current: 1
  6.     }
  7. }
  8. //上拉加载函数
  9. onReachBottom(){ 
  10.     let that = this
  11.     //每次上拉加载的数据比上一次多十个
  12.     that.size += SIZE
  13.     setTimeout(()=>{ 
  14.         that.getData()
  15.     },1000)
  16. }

发表评论

表情：
评论列表 （有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读