<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>