emis-sapp/components/tpx-scroll-view/tpx-scroll-view.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="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) {
					this.getDataList(true)
				},
				deep: true
			}
		},
		computed: {
			customStyle() {
				let stl = `height: 100%;`
				if(this.maxHeight) {
					stl += `max-height:${this.maxHeight}rpx;`
				}
				return stl
			}
		},
		props: {
			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() {
			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>