欢迎光临万书涛的个人博客

Uni-app制作小程序下拉刷新功能

作者:万书涛  / 日期:2021-09-10 17:48:05 /  来源:本站原创 /   浏览:
摘要
下拉刷新在小程序的列表页中比较常见,一般我们按住手机往下拖动即可自动加载页面数据,那么在uni-app中是如何制作下拉刷新功能呢?下面我们一起来看一下。  
在uni-app中制作下拉刷新要用到onPullDownRefresh处理函数,这个函数和onLoad生命周期函数同级,在我们拖动小程序到了一页数据完事时就会触发这个方法,然后就可以在这个方法里写刷新初始化数据的功能了,代码如下:
 

onPullDownRefresh() {
this.pagen=1
this.goodsarr=[]
this.flag=false
setTimeout(()=>{
 
this.getGoods()
uni.stopPullDownRefresh()
},1000)

}

代码解释:
其中的this.pagen=1表示初始化页面为1,也就是默认加载第一页的数据,随着拖动的进行,当拖动到一页底部时,调用onReachBottom,在这个方法里累加1,这样后面页面的数据就出来了。
this.goodsarr=[]表示清空商品,其中的this.goodsarr是一个数组,存储在data里面。
this.flag是一个标志,通过这个标志的true和false来展现页面到了底部提示信息。
在setTimeout方法里,调用了两个函数,分别来说:
先看this.getGoods()方法,这个方法通过接口来拿到所有商品信息,然后展示出来,方法如下:
 

methods: {
async getGoods(){
const res= await this.$getmyRequest({
url:'e/xxx.php?pagenum='+this.pagen
})
//console.log(res)
//this.goodsarr=res.data.mes
 
this.goodsarr=[...this.goodsarr,...res.data.mes]
this.getleng=res.data.mes.length
//console.log(res.data.mes.length)
}

}

其中的this.$getmyRequest是自定义的一个异步js方法,通过这个方法和url接口就能拿到数据,方法主要是调用uni.request结合Promise异步获取数据而展示出来,关键代码如下:
 

export const getmyRequest=(myoptions)=>{
return new Promise((resolve,reject)=>{
uni.request({
url:BasePath+myoptions.url,
method:myoptions.method || 'GET',
data:myoptions.data || {},
success: (res) => {
if(res.data.status!==0)
{
return uni.showToast({
title:'没有获取到22'
})

}
resolve(res)
},
fail: (err) => {
return uni.showToast({
title:'请求接口失败aa'
})
reject(err)
}


})
});
 
}

当下拉刷新完成后,别忘了调用uni.stopPullDownRefresh()来执行停止刷新操作。
 
所属分类: 暂无分类
微信二维码

扫描关注微信公众号
第一时间获取最新资讯
本文由万书涛原创,地址:https://www.wtaoblog.com/wxxcx/263.html
如需转载,须以文字形式注明本文地址,否则禁止转载

猜你喜欢

无相关信息