微信小程序(下拉刷新数据)新手向

记录一下困扰自己的一个小问题,也给各位小伙伴一个借鉴呀~
在做自己的个人小程序项目时,需要实现用户下拉刷新数据,看了很多教程,都在说用scroll-view来实现,但是自己对样式要求不高,就使用微信自带的吧~

实现的效果:

1, 如果需要全局都实现下拉刷新的话,可以在app.json文件,window里面进行配置启用下拉刷新,只有一两个页面不需要下拉刷新的话,就在页面的json文件内配置,关闭下拉刷新

开启全局下拉刷新----->
app.json:

{
 "window": {
                                //json文件不能注释,但是为了便于解释写在这里哈,
 "backgroundTextStyle": "dark", //backgroundTextStyle仅支持dark / light,如果设置为light的话三个点的加载动画和背景色一样就看不出来
    "enablePullDownRefresh": true 
  }
}

局部关闭下拉刷新----->
index.json:

{
  "enablePullDownRefresh": false
}

同理可得只有一两个页面需要刷新,就在页面的页面的json文件内配置,开启下拉刷新即可

2, 刷新数据
当我们顶部下拉时会触发微信的 onPullDownRefresh 函数,在这里面我们就可以重新请求数据
index.js:

async onPullDownRefresh(){
const res=await wx.request({
      url: xxx,
      method:xxx,
      data: xxx
})
//当请求完成后我们需要调用 wx.stopPullDownRefresh()停止刷新,下拉窗口弹回
   wx.stopPullDownRefresh()
}

总结:如果对样式要求不高的话,这样就能实现效果啦。在onPullDownRefresh函数使用async 异步函数,等待数据返回,具体的请求后台数据方法可以看看我的其他文章哈!

你可能感兴趣的:(微信小程序开发,下拉刷新)