1:在项目的根目录打开page.json,找到对应的页面,在下面添加
{
"path": "goods_list/goods_list",
"style": {
"navigationBarTitleText": "商品列表",
//开启下拉刷新
"enablePullDownRefresh": true,
//当前窗口的背景颜色
"backgroundColor": "#F8F8F8",
"onReachBottomDistance": 150
}
},
2:在对应页面监听enablePullDownRefresh事件,与methods平级监听onPullDownRefresh
//下拉刷新
onPullDownRefresh(){
//重置关键数据
//重置页码值
this.queryObj.pagenum = 1
//重置总数
this.total = 0
//重置节流阀
this.isloading = false
//重置商品列表信息
this.goodsList = []
//重新发起请求:请求发送成功以后传入一个回调函数,回调函数停止下拉刷新
this.getGoodsList(() => uni.stopPullDownRefresh())
}
3:改造getGoodsList
函数,接收回调函数
methods: {
async getGoodsList(cb) {
//开启节流阀
this.isLoading = true
const {data: res} = await uni.$http.get('******', this.queryObj)
if (res.meta.status !== 200) {
return uni.$showMsg()
}
console.log(res)
//请求完成,关闭节流阀
this.isLoading = false
// 只要数据请求完毕,就立即按需调用 cb 回调函数
cb && cb()
// 为数据赋值
//上拉加載更多,,定义一个新数组,将旧数组展开,再将旧数组展开
this.goodsList = [...this.goodsList , ...res.message.goods]
this.total = res.message.total
}
},