173 lines
3.2 KiB
Vue
173 lines
3.2 KiB
Vue
<template>
|
|
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" :style="customStyle">
|
|
<slot></slot>
|
|
|
|
<!-- 加载更多 -->
|
|
<u-loadmore v-if="showLoadMore" icon-size="28" font-size="28" margin-top="20" margin-bottom="20"
|
|
status="loading" />
|
|
|
|
<!-- 没有更多了 -->
|
|
<view v-if="showLoadedAll && loadedAll && resObject.list.length !== 0" class="pt-20 pb-20">
|
|
<u-loadmore icon-size="28" font-size="28"
|
|
status="nomore" />
|
|
</view>
|
|
|
|
<!-- 空数据页 -->
|
|
<view v-if="!showLoadMore && resObject.list.length == 0">
|
|
<tpx-empty :size="size"></tpx-empty>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
import { debounce } from "@/common/util"
|
|
|
|
export default {
|
|
watch: {
|
|
searchParam: {
|
|
handler: function(cval, oval) {
|
|
if(this.autoReload) {
|
|
this.getDataList(true)
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
computed: {
|
|
customStyle() {
|
|
let stl = `height: 100%;`
|
|
if(this.maxHeight) {
|
|
stl += `max-height:${this.maxHeight}rpx;`
|
|
}
|
|
return stl
|
|
}
|
|
},
|
|
props: {
|
|
createReload: {
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
autoReload: {
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
searchParam: {
|
|
default () {
|
|
return {}
|
|
}
|
|
},
|
|
showLoadedAll: {
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
getListFun: {
|
|
default () {
|
|
return null
|
|
}
|
|
},
|
|
resObject: {
|
|
default () {
|
|
return {
|
|
list: []
|
|
}
|
|
}
|
|
},
|
|
size: {
|
|
default () {
|
|
return 'dfl'
|
|
}
|
|
},
|
|
maxHeight: {
|
|
default () {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
reqLoading: false,
|
|
page: { // 分页参数
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
},
|
|
showLoadMore: false, // 是否显示加载更多的loading
|
|
loadedAll: false, // 是否加载了所有数据
|
|
}
|
|
},
|
|
created() {
|
|
if(this.createReload) {
|
|
this.getDataList(true)
|
|
}
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
unmounted() {},
|
|
|
|
methods: {
|
|
async onScrollBottom() {
|
|
this.$emit('onScrollBottom')
|
|
if (this.loadedAll || this.showLoadMore) {
|
|
return
|
|
}
|
|
this.showLoadMore = true
|
|
this.page.pageNum++
|
|
try{
|
|
await this.getDataList()
|
|
}catch(e){
|
|
// 滚动下一页加载失败，重置 page.pageNum
|
|
this.page.pageNum --
|
|
}
|
|
this.showLoadMore = false
|
|
},
|
|
async getDataList(reload) {
|
|
if(!this.getListFun) {
|
|
return
|
|
}
|
|
if (reload) {
|
|
this.$emit('onListReload', this.searchParam)
|
|
this.page.pageNum = 1
|
|
this.showLoading()
|
|
}
|
|
this.reqLoading = true
|
|
const res = await this.getListFun({
|
|
...this.page,
|
|
...this.searchParam
|
|
})
|
|
this.reqLoading = false
|
|
let list = res.rows || []
|
|
if (reload) {
|
|
this.hideLoading()
|
|
} else {
|
|
list = this.resObject.list.concat(list)
|
|
}
|
|
this.loadedAll = res.total <= list.length
|
|
this.updateRes({
|
|
list,
|
|
total: res.total
|
|
})
|
|
},
|
|
updateRes(obj) {
|
|
const res = {
|
|
...this.resObject,
|
|
page: this.page,
|
|
showLoadMore: this.showLoadMore,
|
|
loadedAll: this.loadedAll,
|
|
reqLoading: this.reqLoading,
|
|
...obj,
|
|
}
|
|
this.$emit('update:resObject', res)
|
|
this.$emit('onListChange', res)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.sch-cont {
|
|
position: relative;
|
|
}
|
|
</style> |