写APP端总是避免不了要下拉刷新加载和下拉刷新
mescroll的uni版本, 是在 uni-app 运行的下拉刷新和上拉加载的组件,用着挺不错的
结合官网看 认真看官方文档收获十分大
官网讲解很详细:/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 (检查是否配置了多余的属性)
