关于uniapp的下拉刷新，上拉加载的使用

uniapp

前期准备

1.因为我们要做这个效果需要后端的接口分页支持，所以我们需要模拟数据（mock）

创建文件夹api，api文件夹中创建mock.js。

export function apiGoods(pageNum, pageSize, isGoodsEdit) {console.log('参数------>',pageNum, pageSize, isGoodsEdit)return new Promise((resolute, reject)=>{//延时一秒,模拟数据联网延时setTimeout(()=> {try{let data = isGoodsEdit ? goodsEdit : goods;//模拟分页数据let list=[];for (let i = (pageNum-1)*pageSize; i < pageNum*pageSize; i++) {if(i==data.length) break;list.push(data[i]);}//模拟接口请求成功console.log("page.num=" + pageNum + ", page.size=" + pageSize + ", curPageData.length=" + list.length);resolute(list);} catch (e) {//模拟接口请求失败reject(e);}},1000)})
}

api文件中创建文件goods.js

export default [{"id": "1","goodImg": "http://www.mescroll.com/demo/res/img/pd1.jpg","goodName": "【1】  六罐装荷兰美素佳儿金装2段900g","goodPrice": 1149.00,"goodSold": 648
}, {"id": "2","goodImg": "http://www.mescroll.com/demo/res/img/pd2.jpg","goodName": "【2】  韩国Amore爱茉莉红吕洗发水套装修复受损发质","goodPrice": 89.00,"goodSold": 128
}, {"id": "3","goodImg": "http://www.mescroll.com/demo/res/img/pd3.jpg","goodName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g","goodPrice": 195.00,"goodSold": 968
}, {"id": "4","goodImg": "http://www.mescroll.com/demo/res/img/pd4.jpg","goodName": "【4】  Fisher goodPrice费雪 费雪三轮儿童滑行车","goodPrice": 299.00,"goodSold": 85
}, {"id": "5","goodImg": "http://www.mescroll.com/demo/res/img/pd5.jpg","goodName": "【5】  Babylee巴布力 实木婴儿床 雷卡拉130*70cm","goodPrice": 1889.00,"goodSold": 18
}, {"id": "6","goodImg": "http://www.mescroll.com/demo/res/img/pd6.jpg","goodName": "【6】  Pigeon贝亲 独立三层奶粉盒 送小罐奶粉1段200g","goodPrice": 70.00,"goodSold": 658
}, {"id": "7","goodImg": "http://www.mescroll.com/demo/res/img/pd7.jpg","goodName": "【7】 TTBOO兔兔小布 肩纽扣套装","goodPrice": 268.00,"goodSold": 128
}, {"id": "8","goodImg": "http://www.mescroll.com/demo/res/img/pd8.jpg","goodName": "【8】  Nuna璐拉 婴儿布里奇果精纯嫩肤沐浴露婴儿精纯芦荟胶","goodPrice": 140.00,"goodSold": 366
}, {"id": "9","goodImg": "http://www.mescroll.com/demo/res/img/pd9.jpg","goodName": "【9】  illuma启赋 奶粉3段900g","goodPrice": 252.00,"goodSold": 98
}, {"id": "10","goodImg": "http://www.mescroll.com/demo/res/img/pd10.jpg","goodName": "【10】  Abbott雅培乳蛋白部分水解婴儿配方奶粉3段820g","goodPrice": 89.00,"goodSold": 128
}, {"id": "11","goodImg": "http://www.mescroll.com/demo/res/img/pd11.jpg","goodName": "【11】  韩蜜 酷炫唇蜜（礼盒套装）2.8g*4","goodPrice": 179.00,"goodSold": 35
}, {"id": "12","goodImg": "http://www.mescroll.com/demo/res/img/pd12.jpg","goodName": "【12】  保税区直发【3包装】日本Merries花王纸尿裤NB90","goodPrice": 289.00,"goodSold": 1928
}, {"id": "13","goodImg": "http://www.mescroll.com/demo/res/img/pd13.jpg","goodName": "【13】  Comotomo可么多么 硅胶奶瓶（0-3月奶嘴）150ml绿色","goodPrice": 203.00,"goodSold": 87
}, {"id": "14","goodImg": "http://www.mescroll.com/demo/res/img/pd14.jpg","goodName": "【14】  香港直邮德国瑞德露Rival de Loop芦荟精华安瓶","goodPrice": 152.00,"goodSold": 61
}, {"id": "15","goodImg": "http://www.mescroll.com/demo/res/img/pd15.jpg","goodName": "【15】  保税区直发药师堂尊马油香草味温和保湿无刺激面霜","goodPrice": 269.00,"goodSold": 73
}, {"id": "16","goodImg": "http://www.mescroll.com/demo/res/img/pd16.jpg","goodName": "【16】  香港直邮日本Spatreatment眼膜保湿去细纹法令纹","goodPrice": 219.00,"goodSold": 13
}, {"id": "17","goodImg": "http://www.mescroll.com/demo/res/img/pd17.jpg","goodName": "【17】  韩国MEDIHEALNMF可莱丝针剂睡眠面膜","goodPrice": 81.00,"goodSold": 128
}, {"id": "18","goodImg": "http://www.mescroll.com/demo/res/img/pd18.jpg","goodName": "【18】  DHC蝶翠诗橄榄蜂蜜滋养洗脸手工皂90g","goodPrice": 123.00,"goodSold": 77
}, {"id": "19","goodImg": "http://www.mescroll.com/demo/res/img/pd19.jpg","goodName": "【19】  日本资生堂CPB肌肤之钥新版隔离霜 清爽型 30ml","goodPrice": 429.00,"goodSold": 36
}, {"id": "20","goodImg": "http://www.mescroll.com/demo/res/img/pd20.jpg","goodName": "【20】 Heinz亨氏 婴儿面条优加面条全素套餐组合3口味3盒","goodPrice": 39.00,"goodSold": 61
}, {"id": "21","goodImg": "http://www.mescroll.com/demo/res/img/pd21.jpg","goodName": "【21】  Heinz亨氏 乐维滋果汁泥组合5口味15袋","goodPrice": 69.00,"goodSold": 55
}, {"id": "22","goodImg": "http://www.mescroll.com/demo/res/img/pd22.jpg","goodName": "【22】  保税区直发澳大利亚Swisse高浓度蔓越莓胶囊30粒","goodPrice": 271.00,"goodSold": 19
}, {"id": "23","goodImg": "http://www.mescroll.com/demo/res/img/pd23.jpg","goodName": "【23】  挪威Nordic Naturals小鱼婴幼儿鱼油DHA滴剂","goodPrice": 102.00,"goodSold": 125
}, {"id": "24","goodImg": "http://www.mescroll.com/demo/res/img/pd24.jpg","goodName": "【24】  澳大利亚Bio island DHA for Pregnancy海藻油DHA","goodPrice": 289.00,"goodSold": 28
}, {"id": "25","goodImg": "http://www.mescroll.com/demo/res/img/pd25.jpg","goodName": "【25】  澳大利亚Fatblaster Coconut Detox椰子水","goodPrice": 152.00,"goodSold": 17
}, {"id": "26","goodImg": "http://www.mescroll.com/demo/res/img/pd26.jpg","goodName": "【26】  Suitsky舒比奇 高护极薄舒爽纸尿片尿不湿XL60","goodPrice": 99.00,"goodSold": 181
}, {"id": "27","goodImg": "http://www.mescroll.com/demo/res/img/pd27.jpg","goodName": "【27】  英国JUST SOAP手工皂 玫瑰天竺葵蛋糕皂","goodPrice": 72.00,"goodSold": 66
}, {"id": "28","goodImg": "http://www.mescroll.com/demo/res/img/pd28.jpg","goodName": "【28】  德国NUK 多色婴幼儿带盖学饮杯","goodPrice": 92.00,"goodSold": 138
}]

为了模拟下拉刷新，我们还需要准备另一个mock的数据，所以还需要在api中创建文件goods-edit.js

export default [{"id": "3","goodImg": "http://www.mescroll.com/demo/res/img/pd3.jpg","goodName": "【3】 美素佳儿Friso婴儿配方奶粉3段 ( 商品【1】【2】 已删除 )","goodPrice": 195.00,"goodSold": 968
}, {"id": "4","goodImg": "http://www.mescroll.com/demo/res/img/pd4.jpg","goodName": "【4】  Fisher goodPrice费雪 费雪三轮儿童滑行车","goodPrice": 298.00,"goodSold": 65
}, {"id": "5","goodImg": "http://www.mescroll.com/demo/res/img/pd5.jpg","goodName": "【5】  Babylee巴布力 实木婴儿床 雷卡拉130*70cm","goodPrice": 1789.00,"goodSold": 20
}, {"id": "6","goodImg": "http://www.mescroll.com/demo/res/img/pd6.jpg","goodName": "【6】  Pigeon贝亲 独立三层奶粉盒 送小罐奶粉1段200g","goodPrice": 70.00,"goodSold": 658
}, {"id": "7","goodImg": "http://www.mescroll.com/demo/res/img/pd7.jpg","goodName": "【7】 TTBOO兔兔小布 肩纽扣套装","goodPrice": 268.00,"goodSold": 128
}, {"id": "8","goodImg": "http://www.mescroll.com/demo/res/img/pd8.jpg","goodName": "【8】  Nuna璐拉 婴儿布里奇果精纯嫩肤沐浴露婴儿精纯芦荟胶","goodPrice": 140.00,"goodSold": 366
}, {"id": "9","goodImg": "http://www.mescroll.com/demo/res/img/pd9.jpg","goodName": "【9】  illuma启赋 奶粉3段900g","goodPrice": 252.00,"goodSold": 98
}, {"id": "10","goodImg": "http://www.mescroll.com/demo/res/img/pd10.jpg","goodName": "【10】  Abbott雅培乳蛋白部分水解婴儿配方奶粉3段820g","goodPrice": 89.00,"goodSold": 128
}, {"id": "11","goodImg": "http://www.mescroll.com/demo/res/img/pd11.jpg","goodName": "【11】  韩蜜 酷炫唇蜜（礼盒套装）2.8g*4","goodPrice": 179.00,"goodSold": 35
}, {"id": "12","goodImg": "http://www.mescroll.com/demo/res/img/pd12.jpg","goodName": "【12】  保税区直发【3包装】日本Merries花王纸尿裤NB90","goodPrice": 289.00,"goodSold": 1928
}, {"id": "13","goodImg": "http://www.mescroll.com/demo/res/img/pd13.jpg","goodName": "【13】  Comotomo可么多么 硅胶奶瓶（0-3月奶嘴）150ml绿色","goodPrice": 203.00,"goodSold": 87
}, {"id": "14","goodImg": "http://www.mescroll.com/demo/res/img/pd14.jpg","goodName": "【14】  香港直邮德国瑞德露Rival de Loop芦荟精华安瓶","goodPrice": 152.00,"goodSold": 61
}, {"id": "15","goodImg": "http://www.mescroll.com/demo/res/img/pd15.jpg","goodName": "【15】  保税区直发药师堂尊马油香草味温和保湿无刺激面霜","goodPrice": 269.00,"goodSold": 73
}, {"id": "16","goodImg": "http://www.mescroll.com/demo/res/img/pd16.jpg","goodName": "【16】  香港直邮日本Spatreatment眼膜保湿去细纹法令纹","goodPrice": 219.00,"goodSold": 13
}, {"id": "17","goodImg": "http://www.mescroll.com/demo/res/img/pd17.jpg","goodName": "【17】  韩国MEDIHEALNMF可莱丝针剂睡眠面膜","goodPrice": 81.00,"goodSold": 128
}, {"id": "18","goodImg": "http://www.mescroll.com/demo/res/img/pd18.jpg","goodName": "【18】  DHC蝶翠诗橄榄蜂蜜滋养洗脸手工皂90g","goodPrice": 123.00,"goodSold": 77
}, {"id": "19","goodImg": "http://www.mescroll.com/demo/res/img/pd19.jpg","goodName": "【19】  日本资生堂CPB肌肤之钥新版隔离霜 清爽型 30ml","goodPrice": 429.00,"goodSold": 36
}, {"id": "20","goodImg": "http://www.mescroll.com/demo/res/img/pd20.jpg","goodName": "【20】 Heinz亨氏 婴儿面条优加面条全素套餐组合3口味3盒","goodPrice": 39.00,"goodSold": 61
}, {"id": "21","goodImg": "http://www.mescroll.com/demo/res/img/pd21.jpg","goodName": "【21】  Heinz亨氏 乐维滋果汁泥组合5口味15袋","goodPrice": 69.00,"goodSold": 55
}, {"id": "22","goodImg": "http://www.mescroll.com/demo/res/img/pd22.jpg","goodName": "【22】  保税区直发澳大利亚Swisse高浓度蔓越莓胶囊30粒","goodPrice": 271.00,"goodSold": 19
}, {"id": "23","goodImg": "http://www.mescroll.com/demo/res/img/pd23.jpg","goodName": "【23】  挪威Nordic Naturals小鱼婴幼儿鱼油DHA滴剂","goodPrice": 102.00,"goodSold": 125
}, {"id": "24","goodImg": "http://www.mescroll.com/demo/res/img/pd24.jpg","goodName": "【24】  澳大利亚Bio island DHA for Pregnancy海藻油DHA","goodPrice": 289.00,"goodSold": 28
}, {"id": "25","goodImg": "http://www.mescroll.com/demo/res/img/pd25.jpg","goodName": "【25】  澳大利亚Fatblaster Coconut Detox椰子水","goodPrice": 152.00,"goodSold": 17
}, {"id": "26","goodImg": "http://www.mescroll.com/demo/res/img/pd26.jpg","goodName": "【26】  Suitsky舒比奇 高护极薄舒爽纸尿片尿不湿XL60","goodPrice": 99.00,"goodSold": 181
}, {"id": "27","goodImg": "http://www.mescroll.com/demo/res/img/pd27.jpg","goodName": "【27】  英国JUST SOAP手工皂 玫瑰天竺葵蛋糕皂","goodPrice": 72.00,"goodSold": 66
}, {"id": "28","goodImg": "http://www.mescroll.com/demo/res/img/pd28.jpg","goodName": "【28】  德国NUK 多色婴幼儿带盖学饮杯","goodPrice": 92.00,"goodSold": 138
}]

2.第三份插件准备工作

做了这些mock数据的准备工作。
一般我们期待在列表数据循环的时候，会有一个下拉刷新以及下拉加载最好还能有回到顶部的效果，这个时候我们采取一个第三方的库，我觉得还是十分好用精致的下拉刷新和上拉加载 js 框架.支持 vue,完美运行于移动端和主流 PC 浏览器
在使用之前，我们先看一段布局情况

<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"><view class="notice-warp"><view class="notice">商品的名称价格销量随时会变动,也可能会下架删除</view><view class="notice">所以本Demo的下拉刷新会重置列表数据</view><view class="btn-change" @click="isGoodsEdit == true ? (isGoodsEdit = false) : (isGoodsEdit = true)">{{ isGoodsEdit ? '已模拟后台修改信息, 请下拉刷新' : '点击模拟后台修改商品信息' }}</view></view><good-list :list="goods"></good-list>
</mescroll-body>

属性或方法	含义
ref=“mescrollRef”	字节跳动小程序 ref=“mescrollRef” 必须配置
@init=“mescrollInit”	初始化，必须配置
@down=“downCallback”	必须配置
@up=“upCallback”	必须配置
:down=“downOption”	下拉刷新的常用配置
:up=“upOption”	上拉加载的常用配置

第三份插件的配置

因为我们一个项目中有很多地方需要使用到这个效果，所以我们需要做全局引入，注册为全局组件，方便我们使用。

// 在main.js中注册为全局组件
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
Vue.component('mescroll-body', MescrollBody)
Vue.component('mescroll-uni', MescrollUni)

两个核心方法

方法	含义
upCallback(page)	上拉加载的回调
downCallback()	下拉刷新的回调

核心代码

upCallback(page) {//联网加载数据apiGoods(page.num, page.size, this.isGoodsEdit).then(curPageData=>{//联网成功的回调,隐藏下拉刷新和上拉加载的状态;//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;//方法一(推荐): 后台接口有返回列表的总页数 totalPage//this.mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)//方法二(推荐): 后台接口有返回列表的总数据量 totalSize//this.mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)//方法三(推荐): 您有其他方式知道是否有下一页 hasNext//this.mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据this.mescroll.endSuccess(curPageData.length);//设置列表数据if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表this.goods=this.goods.concat(curPageData); //追加新数据}).catch(()=>{//联网失败, 结束加载this.mescroll.endErr();})}

写在最后

代码同步在个人的码云上。

关于uniapp的下拉刷新，上拉加载的使用相关推荐

Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
下拉加载实现 java_[Java教程]iscroll5实现一个下拉刷新上拉加载的效果
[Java教程]iscroll5实现一个下拉刷新上拉加载的效果 0 2016-08-24 15:00:08 直接上代码!!! * { margin: 0; padding: 0; } ul, li { ...
小程序在父组件执行子组件方法，可适用于下拉刷新上拉加载之后执行子组件方法
当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法. 思路很简单,类似于vue中给子组件加 ...
分享轮子-flutter下拉刷新上拉加载
flutter下拉上拉组件轮子什么是flutter? 首先说下flutter,估计这个应该挺多人没听过flutter这个框架,它是一个google推出的跨平台的移动应用UI框架,和React Nat ...
使用MJRefresh自定义下拉刷新,上拉加载动画
有时候我们需要自己设置下拉刷新,上拉加载动画的实现,这里主要是记录下使用MJRefresh自定义下拉刷新,上拉加载动画..... 下拉刷新我们只需要继承MJRefreshGifHeader即可: 实现 ...
android listview下拉刷新动画,android 安卓 listview 支持下拉刷新上拉加载更多
[1]重写listViewimport java.text.SimpleDateFormat; import java.util.Date; import com.example.testdddlea ...
Android 下拉刷新上拉载入多种应用场景超级大放送（上）
转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉载入,网上的Demo太多太多了,这 ...
react-native 自定义下拉刷新 / 上拉加载更多组件
1.封装 Scroller 组件 src/components/Scroller/index.js /*** 下拉刷新/上拉加载更多组件(Scroller)*/ import React, {Com ...
Android ListView 实现下拉刷新上拉加载
转载请注明出处:http://blog.csdn.net/allen315410/article/details/39965327 1.简介无疑,在Android开发中,ListView是使用非常频 ...
android 列表上拉加载更多,Android 下拉刷新,上拉加载更多控件–支持ListView,GridView和ScrollView...
麦洛遇到这样一个需求,实现类似于IOS下拉刷新,上拉加载更多的控件.麦洛google,baidu了一番,网上有不少实现,比较常见的是国外牛人的实现,不过国外的实现基本上都是扩展于ListView,所以 ...