const initListPageContext = () => ({ // 每页 pageSize: 10, // 当前页 page: 1, // 总数量 total: 0, }) export default { onPullDownRefresh () { // 重置页数 this.listPageContext.page = 1; this.getData(this.listPageContext) .finally(() => { uni.stopPullDownRefresh(); }); }, /** * 尝试给页面打补丁 * 获取当前以加载的数据 * 仅在没有数据的时候加载并且数据已经存在的情况下调用 * @return {*} */ onShow () { if (this.status === "loading" || this.originData.length === 0) { return; } return this._getData({page: 1, pageSize: this.originData.length || this.listPageContext.pageSize}) .then(res => { this.originData = res.data; this.listPageContext.total = res.total; }) }, onReachBottom () { this._onReachBottom(); }, data () { return { /** * 用于 loadmore 组件 * @type {'loadmore' | 'loading' | 'nomore'} */ status: 'loadmore', loadText: { loadmore: '轻轻上拉', loading: '努力加载中', nomore: '没有更多了' }, // 原始数据 originData: [], listPageContext: initListPageContext(), } }, computed: { // 是否还有更多数据 hasMore () { return this.originData.length < this.listPageContext.total }, // 视图使用的列表数据 dataForUI () { return this.originData.map((item, index) => this._mapFrom(item, index)) }, }, methods: { _getData (paging) { throw new Error('请在组件中实现 _getData 方法') }, _mapFrom (remoteItem, index) { throw new Error('请在组件中实现 _mapFrom 方法') }, _uniqueId (remoteItem) { throw new Error('请在组件中实现 _uniqueId 方法') }, getData (paging) { paging = paging || this.listPageContext this.status = 'loading' return this._getData(paging) .then(res => { if (this.listPageContext.page === 1) { this.originData = res.data } else { this.originData = this.originData.concat(res.data) } this.listPageContext.total = res.total // 判断是否还有更多 if (this.originData.length >= this.listPageContext.total) { this.status = 'nomore' } else { this.status = 'loadmore' } }) .catch(() => { this.status = 'loadmore' }) }, patchOriginData (index, newData) { const oldData = this.originData[index] this.originData = [ ...this.originData.slice(0, index), {...oldData, ...newData}, ...this.originData.slice(index + 1), ] }, // 删除某条数据 deleteOriginData (index) { this.originData = [ ...this.originData.slice(0, index), ...this.originData.slice(index + 1), ] }, resetListPage () { this.originData = [] this.listPageContext = initListPageContext() }, _onReachBottom() { // 如果没有更多数据了,就不再加载 // 如果数据为 0, 则属于误触发,不再加载 // 如果正在加载中,也不再加载 if (!this.hasMore || this.originData.length === 0 || this.status === "loading") { return } // 页数 +1 this.listPageContext.page += 1; this.getData(this.listPageContext); } }, }