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

记录一下困扰自己的一个小问题,也给各位小伙伴一个借鉴呀~
在做自己的个人小程序项目时,需要实现用户下拉刷新数据,看了很多教程,都在说用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 异步函数,等待数据返回,具体的请求后台数据方法可以看看我的其他文章哈!

  • 3
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值