学习mescroll的下拉刷新、上拉加载

写APP端总是避免不了要下拉刷新加载和下拉刷新

mescroll的uni版本, 是在 uni-app 运行的下拉刷新和上拉加载的组件,用着挺不错的

结合官网看认真看官方文档收获十分大
官网讲解很详细:http://www.mescroll.com/uni.html#mescrolluni

mescroll的最重要的两个事件
上拉事件下拉事件

上拉加载事件示例:

  <mescroll-uniref="mescrollRef"@init="mescrollInit"@down="downCallback"@up="upCallback":down="downOption":up="upOption":fixed="false"></mescroll-uni>

  /* 上拉加载的回调事件  */async upCallback(pageObj) {console.log(pageObj, "pageObj");/*  pageObj里面有num和size值 */const current = pageObj.num; // 页码, 默认从1开始const size = pageObj.size; // 页长, 默认每页10条const res = await TechnicalData({page: { current, size },});console.log({ ...this.searchFiltersObj }, "...this.searchFiltersObj");if (!res || res.code !== "200" || !res.data) {//  请求失败,隐藏加载状态uni.showToast({title: res.msg || res.message,icon: "error",});this.mescroll.endErr();console.log(res, "resdddddddddddddd");return;}if (pageObj.num === 1) this.TechnicalData = []; // 如果是第一页需手动置空列表this.TechnicalData = [...this.TechnicalData, ...res.data];const data = res.data;// 接口返回的当前页数据列表 (数组)// const curPageData = data.records;const curPageData = data;// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)const curPageLen = curPageData.length;// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)// 值对不上// const totalSize = data.total;const totalSize = data;this.mescroll.endBySize(curPageLen, totalSize);},

注意: mescroll无需配置pages.json (检查是否配置了多余的属性)

学习mescroll的下拉刷新、上拉加载相关推荐

分享轮子-flutter下拉刷新上拉加载
flutter下拉上拉组件轮子什么是flutter? 首先说下flutter,估计这个应该挺多人没听过flutter这个框架,它是一个google推出的跨平台的移动应用UI框架,和React Nat ...
Android 下拉刷新上拉载入多种应用场景超级大放送（上）
转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉载入,网上的Demo太多太多了,这 ...
Android ListView 实现下拉刷新上拉加载
转载请注明出处:http://blog.csdn.net/allen315410/article/details/39965327 1.简介无疑,在Android开发中,ListView是使用非常频 ...
开启Fluter基础之旅五-------ListView 3D滚动、Flipper效果、ListView下拉刷新上拉加载、ListView重排序...
继续来来操练Flutter的基础,对于Flutter的学习也有一段时间了,实操项目还木有做过,所以待这次基础学完之后就打算用一个项目对之前所学的进行一下巩固,不然光学这些零散的知识点最终还是不会Flu ...
Android 下拉刷新上拉加载多种应用场景超级大放送（上）
转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉加载,网上的Demo太多太多了,这 ...
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中给子组件加 ...
使用MJRefresh自定义下拉刷新,上拉加载动画
有时候我们需要自己设置下拉刷新,上拉加载动画的实现,这里主要是记录下使用MJRefresh自定义下拉刷新,上拉加载动画..... 下拉刷新我们只需要继承MJRefreshGifHeader即可: 实现 ...
android listview下拉刷新动画,android 安卓 listview 支持下拉刷新上拉加载更多
[1]重写listViewimport java.text.SimpleDateFormat; import java.util.Date; import com.example.testdddlea ...

学习mescroll的下拉刷新、上拉加载

学习mescroll的下拉刷新、上拉加载相关推荐

最新文章

热门文章