|
|
@@ -75,6 +75,14 @@ const props = defineProps({
|
|
|
})
|
|
|
|
|
|
const list = ref([])
|
|
|
+let loadSeq = 0
|
|
|
+
|
|
|
+const normalizeListData = (res) => {
|
|
|
+ if (Array.isArray(res?.rows)) return res.rows
|
|
|
+ if (Array.isArray(res?.data?.rows)) return res.data.rows
|
|
|
+ if (Array.isArray(res?.data)) return res.data
|
|
|
+ return []
|
|
|
+}
|
|
|
|
|
|
const getList = (mescroll) => {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
@@ -88,45 +96,47 @@ const getList = (mescroll) => {
|
|
|
})
|
|
|
|
|
|
methods.then(res => {
|
|
|
- emit('update:total', res.total || res.data.total || 0)
|
|
|
+ emit('update:total', res.total || res.data?.total || 0)
|
|
|
resolve(res)
|
|
|
- })
|
|
|
+ }).catch(reject)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
|
|
|
const upCallback = (mescroll) => {
|
|
|
- if (!props.requestStr) return;
|
|
|
+ if (!props.requestStr) {
|
|
|
+ mescroll.endErr()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const seq = ++loadSeq
|
|
|
getList(mescroll).then(res => {
|
|
|
- console.log(res, 'res')
|
|
|
- const curPageData = res.rows || res.data?.rows || res.data || [] // 当前页数据
|
|
|
- if (mescroll.num == 1) list.value = []; // 第一页需手动制空列表
|
|
|
- list.value = list.value.concat(curPageData); //追加新数据
|
|
|
-
|
|
|
+ if (seq !== loadSeq) return
|
|
|
+ if (res?.code !== undefined && res.code !== 200) {
|
|
|
+ mescroll.endErr()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const curPageData = normalizeListData(res)
|
|
|
+ if (mescroll.num == 1) list.value = []
|
|
|
+ list.value = list.value.concat(curPageData)
|
|
|
emit('updateList', list.value, mescroll.num)
|
|
|
- //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
|
|
|
- //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
|
|
|
-
|
|
|
- //方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
|
|
- //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
|
|
|
-
|
|
|
- //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
|
|
|
- mescroll.endBySize(curPageData.length, res.total || res.data.total || 0); //必传参数(当前页的数据个数, 总数据量)
|
|
|
-
|
|
|
- //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
|
|
|
- //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
|
|
|
-
|
|
|
- //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
|
|
|
- // mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
|
|
|
+ const total = res.total ?? res.data?.total ?? 0
|
|
|
+ mescroll.endBySize(curPageData.length, total)
|
|
|
}).catch(() => {
|
|
|
- mescroll.endErr(); // 请求失败, 结束加载
|
|
|
+ if (seq !== loadSeq) return
|
|
|
+ mescroll.endErr()
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//重置列表
|
|
|
const resetUpScroll = () => {
|
|
|
+ loadSeq++
|
|
|
setTimeout(() => {
|
|
|
- getMescroll().resetUpScroll()
|
|
|
+ const mescroll = getMescroll()
|
|
|
+ if (!mescroll) return
|
|
|
+ if (mescroll.isUpScrolling) {
|
|
|
+ mescroll.endErr()
|
|
|
+ }
|
|
|
+ mescroll.resetUpScroll()
|
|
|
}, 100)
|
|
|
}
|
|
|
|