exam/exam-06173-uni - reg/components/yf-more-list/yf-more-list.vue

<template>
	<view :id="id">

		<uni-list>
			<template v-for="(item,index) in dataList">
				<slot name="item" v-bind:data="item"></slot>
			</template>
		</uni-list>

		<yf-empty-view :isShow="more==='noMore' && query.current==1 && dataList.length==0"></yf-empty-view>
		<uni-load-more v-if="dataList.length > 0 " :status="more" :contentText="contentText"></uni-load-more>

	</view>
</template>

<script>
	import request from '@/common/request.js'

	export default {
		name: 'yf-more-list',
		components: {},
		props: {
			url: String, // 页面地址
			params: Object
		},
		data() {
			return {
				id: new Date().getTime(),
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了..."
				},
				loading: false,
				more: 'more',
				query: {
					current: 1,
					size: 10,
					params: {
						
					}
				},
				dataList: []
			}
		},
		watch: {
			params: {
				handler(val) {
					this.query.params = val
					this.initData()
				},
				deep: true
			}
		},

		mounted() {
			this.id = new Date().getTime()
			this.query.params = this.params
			this.loadData()
		},


		methods: {

			initData() {
				this.more = 'more'
				this.query.current = 1
				this.dataList = []
				this.loadData();
			},


			loadData() {
				

				// 避免重复加载
				if (this.more === 'loading' || this.more == 'noMore') {
					return;
				}

				this.more = 'loading'
				// 加载数据
				request.post(this.url, this.query).then(res => {
					
					// 清空列表
					if (this.query.current === 1) {
						this.dataList = []
					}

					// 追加数据
					this.dataList = this.dataList.concat(res.records)
					
					console.log(this.dataList)
					if (this.query.current >= res.pages) {
						this.more = 'noMore'
					} else {
						this.more = 'more'
						this.query.current += 1
					}
				})
			}
		}
	}
</script>

<style>


</style>