uni-app对 下拉刷新 和 上拉加载更多 功能的实现

uni-app对 下拉刷新 和 上拉加载更多 功能的实现

上拉加载更多 与 加载到最底部的提示:监听触底行为 ,在事件中累加页码,获取商品列表数据
uni-app对 下拉刷新 和 上拉加载更多 功能的实现_第1张图片

保留之前的数据(this.goods是原有数据,res.data.message是新加载的数据)
uni-app对 下拉刷新 和 上拉加载更多 功能的实现_第2张图片

添加view组件,提示“我是有底线的”,没有数据时提示,用v-if等于布尔值来判断底部提示显示与否,默认为false
uni-app对 下拉刷新 和 上拉加载更多 功能的实现_第3张图片

在监听事件中判断布尔值为真或假,判断商品的length是否小于页码乘以每页数据的长度,如果小于直接return ,布尔值为true
uni-app对 下拉刷新 和 上拉加载更多 功能的实现_第4张图片

下拉刷新:首先在pages.json文件中开启下拉刷新事件,注意:不要在globalStyle中全局开启,在需要的页面开启就行
uni-app对 下拉刷新 和 上拉加载更多 功能的实现_第5张图片

然后注册触发下拉刷新事件,在事件中请求第一页的数据,把列表页变为空,隐藏底部提示,在重新获取列表页(调用获取列表数据的方法)。请求数据时先变为空,请求延时一秒钟,在获取数据,数据刷新完成,关闭刷新按钮的提示(在获取数据列表时传递一个回调函数关闭提示)
uni-app对 下拉刷新 和 上拉加载更多 功能的实现_第6张图片

并且在获取数据列表页方法中接收这个回调函数,判断一下有这个函数就调用它,没有就不调用
uni-app对 下拉刷新 和 上拉加载更多 功能的实现_第7张图片

你可能感兴趣的:(vue.js,javascript)