小程序下拉刷新,如何等待数据返回再收起loading

小程序下拉刷新重新请求

关于我上面封装的请求网络
小程序封装网络请求

// 封装一个轮播图获取数据函数async getBannerData(){// 封装返回的是一个promise对象,我们可以使用async,await ex7的新语法const bannerPormise =get('/home/swiperdata')const res= await bannerPormisethis.setData({bannerData:res.data.message})// 返回一个promise对象是因为下拉刷新我们需要 重新获取数据,监听数据回来,//就需要promise.all()方法监听一个数组,数组里面的元素为promise对象,return bannerPormise},// 封装获取分类列表的函数async getCategoryData(){const CategoryPromise = get('/home/catitems')const res= await CategoryPromisethis.setData({navList:res.data.message})return CategoryPromise},// 封装获取楼层数据函数async getFroolData(){const froolPromise =get('/home/floordata')const res =await froolPromisethis.setData({floordata:res.data.message})return froolPromise},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 进页面先请求数据this.getBannerData()this.getCategoryData()this.getFroolData()}

用户下拉刷新我们需要在页面配置上设置

{//index.json 文件中配置"enablePullDownRefresh":true  //开启这个属性,页面才能下拉刷新
}

监听用户下拉刷新的API

onPullDownRefresh: function() {}

停止下拉刷新动画

wx.stopPullDownRefresh();

如何等待所有数据再触发停止loading,就是使用Promise.all()方法

Promise.all([ promise对象,promise对象,promise对象]).then( () => { console.log('所有promise都执行完毕了') } )

运行代码

onPullDownRefresh: function() {// 下拉后要重新调用获取数据的函数,这里我们需要使用promise.all()方法监听所有异步函数完成数据返回了没有,// 确认都返回在执行 wx.stopPullDownRefresh()这个api方法 const p1 = this.getBannerData()const p2 = this.getCategoryData()  const p3 = this.getFroolData()   //  获取了返回值,而且还调用了函数哟Promise.all([p1,p2,p3]).then((res)=>{    //其实并不需要res// 调用停止加载wx.stopPullDownRefresh()})},

小程序下拉刷新,如何等待数据返回再收起loading相关推荐

html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
小程序下拉刷新上拉加载等多
小程序下拉刷新上拉加载下拉刷新在当前页面的json文件中开启上拉刷新 async getGoodsList(){ //定义参数信息var n=this.data.infoconst res=aw ...
小程序下拉刷新，恢复页面原样
小程序下拉刷新,恢复页面原样下拉刷新走的是下面的方法 onPullDownRefresh: function() {} 在刷新并请求数据之后,需要手动结束下拉刷新的状态,才能恢复列表的原样.不然,下 ...
微信小程序--下拉刷新
实现微信小程序下拉刷新步骤一 json文件配置(若需要全局配置,则在app.json 反正就配置本界面得到json即可) {"enablePullDownRefresh": tr ...
小程序下拉刷新的实现
小程序下拉刷新 1.使用onPullDownRefresh()这个方法来实现下拉刷新例子如下: // 页面下拉刷新 onPullDownRefresh() { this.loadSwiper();/ ...
微信小程序下拉刷新问题
微信小程序下拉刷新问题我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享一下,有这个问题朋友,赶紧从死胡 ...
小程序下拉刷新和停止刷新
1 首先在全局config中的window配置 enablePullDownRefresh 2 在page中定义 onPullDownRefresh 钩子,到达下拉刷新后执行该函数 --下拉刷新. 3 ...
微信小程序下拉刷新列表onPullDownRefresh；微信小程序上划加载列表onReachBottom；uni-app微信小程序下拉加载数据；uni-app微信小程序上划页面加载数据
需求:微信小程序列表加载有两种方式,分别是按住页面下拉加载数据数据(触发onPullDownRefresh)和直接上划滚动页面到底部加载数据(触发onReachBottom函数). 本文主要是使用上划 ...
小程序下拉刷新上拉触底加载数据
1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数,我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数,其中就会生成「onPullDownRefres ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...

小程序下拉刷新,如何等待数据返回再收起loading

小程序下拉刷新重新请求

用户下拉刷新我们需要在页面配置上设置

小程序下拉刷新,如何等待数据返回再收起loading相关推荐

最新文章

热门文章

小程序下拉刷新,如何等待数据返回再收起loading

小程序下拉刷新 重新请求

用户下拉刷新 我们需要在页面配置上设置

小程序下拉刷新,如何等待数据返回再收起loading相关推荐

最新文章

热门文章

小程序下拉刷新重新请求

用户下拉刷新我们需要在页面配置上设置