1. data: {
  2. pageNo: 1,//当前页
  3. pageSize: 10,//每页条数
  4. count:'',//总条数
  5. orderList: [],
  6. },
  7. onLoad: function () {
  8. var that = this;
  9. var data = `${that.data.type}/${that.data.pageSize}/${that.data.pageNo}`;
  10. that.getOrderList(data);
  11. },
  12. //订单列表
  13. getOrderList(data) {
  14. var that = this;
  15. var orderList = that.data.orderList;
  16. wx.showLoading({
  17. title: '加载中',
  18. })
  19. wx.request({
  20. url: `${host.orderList}/${data}`,
  21. header: {
  22. "content-type": "application/json",
  23. },
  24. success: function (res) {
  25. console.log(res);
  26. if (res.data.code == 0) {
  27. if (res.data.data.list && res.data.data.count > orderList.length) {
  28. var arr = res.data.data.list;
  29. arr.forEach(item => {
  30. orderList.push(item);
  31. })
  32. that.setData({
  33. orderList: orderList,
  34. count: res.data.data.count,
  35. })
  36. }
  37. }
  38. else {
  39. wx.showToast({
  40. icon: 'none',
  41. title: res.data.msg,
  42. })
  43. }
  44. },
  45. complete: function () {
  46. setTimeout(() => {
  47. wx.hideLoading();
  48. wx.stopPullDownRefresh();
  49. }, 500)
  50. }
  51. })
  52. },
  53. /**
  54. * 页面相关事件处理函数--监听用户下拉动作
  55. */
  56. onPullDownRefresh: function () {
  57. var that = this;
  58. var data = `${that.data.type}/${that.data.pageSize}/${that.data.pageNo}`;
  59. that.getOrderList(data);
  60. },
  61. /**
  62. * 页面上拉触底事件的处理函数
  63. */
  64. onReachBottom: function () {
  65. var that = this;
  66. var pageNo = that.data.pageNo;
  67. if (that.data.count > that.data.orderList.length){
  68. that.setData({
  69. pageNo: pageNo += 1,
  70. noMore: true,
  71. })
  72. var data = `${that.data.type}/${that.data.pageSize}/${pageNo}`;
  73. that.getOrderList(data);
  74. }
  75. },

下拉触底需要在当前页面的json文件添加"enablePullDownRefresh": true或者在app.json window里面全局添加。

小程序上拉触底&下拉加载的更多相关文章

  1. 微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识

    下拉更新.分享.阅读标识 本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一 ...

  2. 微信小程序中如何实现分页下拉加载?(附源码)

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  3. 微信小程序小程序使用scroll-view不能使用下拉刷新的解决办法

    <scroll-view class="movie-grid-container" scroll-y="true" scroll-x="fals ...

  4. 在微信小程序中,如何实现下拉刷新(模拟刷新)

    一.在app.json中启动刷新, 在Windows 中, 添加  "enablePullDownRefresh":"true" 二.在需要刷新的页面中写(若是 ...

  5. 【微信小程序】scroll-view与Page下拉冲突

    需求:主界面是个列表.列表可以纵向滑动,下拉添加新的条目Item.每个条目Item可以横向滑动. 发现做下拉时,用Page的enablePullDownRefresh和scroll-view条目的横向 ...

  6. 微信小程序开发——设置默认图片、错误加载图片

    小程序不支持h5中的onerrorimg,只开放了binderror属性,当错误发生时,会发布到 AppService,事件对象event.detail = {errMsg: 'something w ...

  7. 微信小程序 在使用wx.request时显示加载中

    微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图: 我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.re ...

  8. uni-app开发经验分享十四:小程序超过2M限制的方法——分包加载

      起初小程序上线时,微信限制了代码包不能超过1MB,后来功能变大变成了2M了,限制大小是出于对小程序启动速度的考虑,希望用户在使用任何一款小程序时,都能获得一种"秒开"体验.但是 ...

  9. 微信小程序开发--模板(template)使用,数据加载,点击交互

    微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...

随机推荐

  1. node + multer存储element-ui上传的图片

    说明 element-ui的Upload组件可以帮助我们上传我们的图片到我们的服务器,可以使用action参数上传图片,也可以使用http-request自定义上传方式.这里我们使用自定义的方式上传. ...

  2. 倒转数组 Leetcode189

    倒转数组 Leetcode189 记录调整数组顺序而不需要另加内存的一种方法: 题目 189. 旋转数组 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: [ ...

  3. python代码迷之错误(ModuleNotFoundError: No module named 'caffe.proto')

    1.pandas.read_csv book[n]下的print(n) 总图片数是少一张的,print(n)发现也是少了一个序号 仔细查找后发现缺少99号,即最后一张图片没有被读取.print(m)时 ...

  4. learn about sqlserver partitition and partition table --- add or remove table partitions addition more

    Yes . In the previous. chapter , we see how to generate "partition function" "parttit ...

  5. mixin很难吗?

    实践类工作经常会遇到这样的问题,有些概念会用不会说,最近在学习Dart,遇到mixin便是如此.读了几篇网文总觉得良莠不齐,一群码友也说越读越懵,索性静下心来重新出发,一点一滴地弄明白.记录下来分享给 ...

  6. bootstrap 图片类 和 按钮类 部分

    bootstrap框架,来自 Twitter,基于 html ,css ,js.简介灵活. 首先引入  bootstrap.js   bootstrap.css  及 jquery.js  这里不考虑 ...

  7. Spring事务中的隔离级别

    TransactionDefinition接口中定义了五个表示隔离级别的常量: TransactionDefinition.ISOLATION_DEFAULT:使用后端数据库默认的隔离界别,MySQL ...

  8. 关于在osgearth 中 出现 arial.ttf : file not handled 的问题

    这是由于配置osg时 freetype 插件没有配置到位. 我个人的解决方法 打开CMAKE,点击advance,不勾选OSG_TEXT_USE_FONTCONFIG. 同时将freetype路径设置 ...

  9. ceph集群部署

    最近在学习 kubernetes 过程中,想实现 pod 数据的持久化.在调研的过程中,发现 ceph 在最近几年发展火热,也有很多案例落地企业.在选型方面,个人更加倾向于社区火热的项目,Gluste ...

  10. python 处理10000个txt,每个文件夹里面放1000个。

    fileNumberInDiretory = 1000 title_list = getChongFuTitle(cursor) DiretoryNums = math.ceil(len(title_ ...