data: {
pageNo: 1,//当前页
pageSize: 10,//每页条数
count:'',//总条数
orderList: [],
},
onLoad: function () {
var that = this;
var data = `${that.data.type}/${that.data.pageSize}/${that.data.pageNo}`;
that.getOrderList(data);
},
//订单列表
getOrderList(data) {
var that = this;
var orderList = that.data.orderList;
wx.showLoading({
title: '加载中',
})
wx.request({
url: `${host.orderList}/${data}`,
header: {
"content-type": "application/json",
},
success: function (res) {
console.log(res);
if (res.data.code == 0) {
if (res.data.data.list && res.data.data.count > orderList.length) {
var arr = res.data.data.list;
arr.forEach(item => {
orderList.push(item);
})
that.setData({
orderList: orderList,
count: res.data.data.count,
})
}
}
else {
wx.showToast({
icon: 'none',
title: res.data.msg,
})
}
},
complete: function () {
setTimeout(() => {
wx.hideLoading();
wx.stopPullDownRefresh();
}, 500)
}
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
var that = this;
var data = `${that.data.type}/${that.data.pageSize}/${that.data.pageNo}`;
that.getOrderList(data);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
var that = this;
var pageNo = that.data.pageNo;
if (that.data.count > that.data.orderList.length){
that.setData({
pageNo: pageNo += 1,
noMore: true,
})
var data = `${that.data.type}/${that.data.pageSize}/${pageNo}`;
that.getOrderList(data);
}
},

下拉触底需要在当前页面的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. linux下oracle调试小知识

    1.oracle 安装下的/u01/diag/rdbms/orcl/HOF/incident目录下是什么文件?答:每当一个错误发生的时候,oracle会创建一个incident,并且分配一个INCID ...

  2. java核心技术----访问权限

    Java支持四种不同的访问权限: 修饰符 说明 public 共有的,对所有类可见 protected 受保护的,对同一包内的类和所有子类可见 private 私有的,在同一类内可见 默认的 在同一包 ...

  3. C++输出中文字符

    注:本文转载自互联网,感谢作者整理!   1. cout 场景1: 在源文件中定义 const char* str = "中文" 在 VC++ 编译器上,由于Windows环境用 ...

  4. LoadIcon的使用

    LoadIcon msdn: Loads the specified icon resource from the executable (.exe) file associated with an ...

  5. 基于 HTML5 WebGL 的智慧楼宇可视化系统

    前言 可视化的智慧楼宇在 21 世纪是有急迫需求的,中国被世界称为"基建狂魔",全球高层建筑数量位居首位,所以对于楼宇的监控是必不可少.智慧楼宇可视化系统更多突出的是管理方面的功能 ...

  6. 春招必问的redis持久化(RDB AOF),你能答上来么?

    春招面试模拟,如同雷同,纯属巧合!!! 面试的大体流程: 第一步:一般会有笔试题,也可能没有.有笔试题就要好好答了,因为会重视笔试结果,为了节约面试官时间,HR可能先会看,不合格直接让你走人了. 第二 ...

  7. 《 Java 编程思想》CH08 多态

    在面向对象的程序设计语言中,多态是继数据抽象和继承之后的第三种基本特征. 多态通过分离做什么和怎么做,从另一个角度将接口和实现分离开来. "封装"通过合并特征和行为来创建新的数据类 ...

  8. Python Special Methods - 特殊方法

    特殊方法 特殊方法的存在是为了给 Python 解释器调用的,通常自己并不需要直接调用它们.也就是说不应该使用 my_object.__len__() 这种写法,而应该使用 len(my_object ...

  9. DFS判断图是否有环

      利用_DFS_来判断无向图是否存在环的条件思路,我看一次_DFS_是否能访问到之前访问到的节点,如果能够访问到,就说明图存在环,那么关键问题就是判断是一次DFS?,追根到_DFS_算法的实现细节, ...

  10. Java HashMap 四种遍历方式

    HashMap遍历方式包含以下4种: 1.遍历KeySet,再通过Key来getValue. 2.使用entrySet的迭代器. 3.foreach entrySet的方式. 3.foreache v ...