87 lines
2.1 KiB
JavaScript
87 lines
2.1 KiB
JavaScript
import { ref, reactive, onMounted, watch, unref } from 'vue'
|
|
import { onReachBottom } from '@dcloudio/uni-app'
|
|
|
|
export function useListData({ searchParams, api, needInitListData = false, processData }) {
|
|
// 定义响应式数据
|
|
const initListData = ref(needInitListData)
|
|
const loadingData = ref(true)
|
|
const pageParams = reactive({
|
|
pageNo: 1,
|
|
pageSize: 5
|
|
})
|
|
const total = ref(0)
|
|
const loadStatus = ref('loadmore')
|
|
const listData = ref([])
|
|
|
|
// 模拟获取数据的方法
|
|
const getListData = async () => {
|
|
const params = {
|
|
...unref(searchParams),
|
|
...pageParams
|
|
}
|
|
let { list, total: pageTotal } = await api(params)
|
|
total.value = pageTotal
|
|
if (processData) {
|
|
list = processData(list)
|
|
}
|
|
return list
|
|
}
|
|
|
|
// 页面底部触底加载更多
|
|
const scrollToLower = async () => {
|
|
if (listData.value.length >= total.value) {
|
|
loadStatus.value = 'nomore'
|
|
return
|
|
} else {
|
|
loadStatus.value = 'loading'
|
|
}
|
|
pageParams.pageNo++
|
|
await loadMore()
|
|
}
|
|
|
|
// 加载更多数据
|
|
const loadMore = async () => {
|
|
const newData = await getListData()
|
|
listData.value = [...listData.value, ...newData]
|
|
if (listData.value.length >= total.value) loadStatus.value = 'nomore'
|
|
}
|
|
// 初始化数据
|
|
const getInitData = async () => {
|
|
loadStatus.value = 'loadmore'
|
|
pageParams.pageNo = 1
|
|
total.value = 0
|
|
listData.value = []
|
|
loadingData.value = true
|
|
let data = await getListData().finally(() => {
|
|
loadingData.value = false
|
|
})
|
|
listData.value = data
|
|
if (listData.value.length >= total.value) loadStatus.value = 'nomore'
|
|
}
|
|
|
|
// 组件挂载时执行初始化
|
|
onMounted(() => {
|
|
if (initListData.value) {
|
|
getInitData()
|
|
}
|
|
})
|
|
onReachBottom(() => {
|
|
scrollToLower()
|
|
})
|
|
|
|
// 监听滚动到底部事件
|
|
// 注意：在实际应用中，你需要根据你的框架或库来监听滚动到底部的事件
|
|
|
|
return {
|
|
initListData,
|
|
loadingData,
|
|
pageParams,
|
|
total,
|
|
loadStatus,
|
|
listData,
|
|
loadMore,
|
|
scrollToLower,
|
|
getInitData
|
|
}
|
|
}
|