156 lines
3.7 KiB
Vue
156 lines
3.7 KiB
Vue
<template>
|
||
<view v-if="vdata.dataList.length > 0">
|
||
<view class="bind-title">{{ props.title }}</view>
|
||
<view class="layout" >
|
||
<scroll-view scroll-y="true" :style="{maxHeight: props.maxH}"
|
||
@scrolltoupper="reset" @scrolltolower="refresh"
|
||
>
|
||
<view v-for="(item, index) in vdata.dataList" :key="index">
|
||
<slot :info="item" :index="index"></slot>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
import { ref, reactive } from 'vue'
|
||
import { onShow , onLoad } from '@dcloudio/uni-app'
|
||
|
||
const props = defineProps({
|
||
title: { type: String, default: '' },
|
||
maxH: { type: String, default: '424rpx' }, // 最高高度
|
||
pd: { type: String, default: '30rpx 50rpx' },
|
||
requestFun: { type: Function, default: () => {} },
|
||
params: { type: Object, default: () => ({}) },
|
||
flag: { type: Boolean, default: true },
|
||
isonshow: { type: Boolean, default: true },
|
||
pageSize: { type: Number, default: 10 },
|
||
})
|
||
|
||
const emits = defineEmits(['reset', 'refresh'])
|
||
|
||
const vdata = reactive({
|
||
dataList: [], // 数据列表
|
||
})
|
||
|
||
const listParams = {} // 页面传参对象 getList方法中传的参数
|
||
|
||
const queryObj = reactive({
|
||
pageNumber: 1, // 默认是1
|
||
pageSize: props.pageSize, // 默认10条，可传参修改
|
||
isLoad: false, // 是否为上拉加载
|
||
titlePage: '' // 总页数
|
||
})
|
||
|
||
const getList = (listParamObj) => {
|
||
// 非下拉刷新才显示加载提示
|
||
if (queryObj.isLoad) {
|
||
uni.showLoading({ title: '加载中' })
|
||
}
|
||
|
||
// listParamObj 父组件在函数中携带的请求参数，与页码页数，固定参数，合并到一起，并且当该参数对象在调用时有具体值，会将页码重置为1
|
||
let paramObj // 参数合并
|
||
|
||
if (listParamObj) {
|
||
queryObj.pageNumber = 1
|
||
Object.keys(listParamObj).forEach((item) => {
|
||
listParams[item] = listParamObj[item]
|
||
})
|
||
vdata.dataList = []
|
||
}
|
||
|
||
paramObj = Object.assign(
|
||
{
|
||
pageNumber: queryObj.pageNumber,
|
||
pageSize: queryObj.pageSize
|
||
},
|
||
props.params,
|
||
listParams
|
||
)
|
||
|
||
props.requestFun(paramObj)
|
||
.then(({ bizData }) => {
|
||
uni.hideLoading()
|
||
|
||
queryObj.titlePage = Math.ceil(bizData.total / queryObj.pageSize) // 页码总数
|
||
|
||
let data = bizData.records ? bizData.records : bizData
|
||
|
||
// 下拉刷新重置数据， 上拉加载新增数据
|
||
if (queryObj.isLoad) {
|
||
vdata.dataList.push(...data)
|
||
} else {
|
||
vdata.dataList = data
|
||
}
|
||
})
|
||
.catch((err) => uni.hideLoading())
|
||
}
|
||
|
||
// 只在onshow时调用一次， 请求方法
|
||
const onShowGetList = () => {
|
||
if (!props.flag) return false
|
||
uni.showLoading({ title: '加载中' })
|
||
queryObj.pageNumber = 1 // 页码固定为1
|
||
let paramObj = Object.assign(
|
||
{
|
||
// 合并请求参数
|
||
pageNumber: 1,
|
||
pageSize: queryObj.pageSize
|
||
},
|
||
props.params
|
||
)
|
||
|
||
props.requestFun(paramObj)
|
||
.then(({ bizData }) => {
|
||
|
||
uni.hideLoading()
|
||
queryObj.titlePage = Math.ceil(bizData.total / queryObj.pageSize)
|
||
|
||
let data = bizData.records ? bizData.records : bizData
|
||
|
||
vdata.dataList = data // 由于只在onShow 中调用一次，所以数据重新赋值
|
||
})
|
||
}
|
||
|
||
onShow(() => {
|
||
if (props.isonshow) {
|
||
onShowGetList()
|
||
}
|
||
})
|
||
onLoad(() => {
|
||
if (!props.isonshow) {
|
||
onShowGetList()
|
||
}
|
||
})
|
||
|
||
// 下拉刷新
|
||
const reset = () => {
|
||
queryObj.pageNumber = 1
|
||
queryObj.isLoad = false
|
||
getList()
|
||
}
|
||
|
||
// 上拉加载
|
||
const refresh = () => {
|
||
queryObj.pageNumber++
|
||
if (queryObj.pageNumber > queryObj.titlePage) {
|
||
queryObj.pageNumber = queryObj.pageNumber
|
||
return (queryObj.isLoad = false)
|
||
}
|
||
queryObj.isLoad = true
|
||
getList()
|
||
}
|
||
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.layout {
|
||
margin: 30rpx 50rpx;
|
||
}
|
||
.bind-title {
|
||
margin-top: 20rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
</style> |