微信小程序实现下拉刷新功能

第一步、在app.json文件里把enablePullDownRefresh设置为true

微信小程序实现下拉刷新功能_第1张图片

第二步、在需要下拉刷新页面的js文件里写onPullDownRefresh:function(){}这个方法


  onPullDownRefresh:function(){
    console.log('开始下拉刷新')
    wx.showNavigationBarLoading()//在标题栏中显示加载图标
    this.data.currentPage = 1
    this.data.dataList = []  //dataList为获取到的列表数组,自行替换
    this.getRepairListMine()//重新获取列表页
    setTimeout(() => {
      wx.hideNavigationBarLoading();//完成停止加载
      wx.stopPullDownRefresh(); //得到数据后停止下拉刷新
    }, 400)
    console.log('下拉刷新成功')
  },

注意:微信小程序js文件里本身就有onPullDownRefresh:function(){}这个方法,可以直接写在这个方法里面;如果写在外面,记得把原本的那个onPullDownRefresh:function(){}方法删掉,防止覆盖!!!

第三步、不需要下拉的页面可以在对应的json文件里将enablePullDownRefresh设置为false

微信小程序实现下拉刷新功能_第2张图片

app.json文件是控制全局的,enablePullDownRefresh为true时所有页面均可下拉;如果想设置单个页面下拉刷新,在对应页面的json文件里添加"enablePullDownRefresh":true即可。

你可能感兴趣的:(小程序,微信小程序)