uniapp快速封装上拉加载方法

首先新建一个混合mixin文件为list.js

// list mixin
module.exports = {
	data() {
		return {
			total: 0,
			listData: [],
			loadmoreStatus: 'loadmore', // loadmore loading nomore
			page: {
				page: 1,
				size: 10
			},
			queryData: {}
		}
	},
	computed: {},
	onShow() {},
	onReady() {},
    // 上拉加载数据
	onReachBottom() {
		this.loadData()
	},
	methods: {
		// 分页初始化数据isUp是否为上拉加载，默认false
		initDataList(searchData = {}, isUp = false) {
			this.isListLoading = true
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			this.queryData = searchData
			if (!isUp) this.page.page = 1
			this.listApiName({
				search: searchData,
				page: this.page
			}).then(res => {
				if (isUp) {
					this.listData = this.listData.concat(res.data)
				} else {
					this.listData = res.data
					this.loadmoreStatus = 'nomore'
				}
				this.total = res.page.total
			}).catch(err => {
				throw err
			}).finally(() => {
				uni.hideLoading();
				this.isListLoading = false
			})
		},
		//加载列表，上滑加载
		loadData() {
			this.loadmoreStatus = 'loading'
			if (this.listData.length < this.total) {
				this.page.page++
				this.initDataList(this.queryData, true)
			} else {
				this.page.page = 1
				this.loadmoreStatus = 'nomore'
			}
		}
	}
}

在页面调用混合mixin的initDataList方法，传入两个参数searchData查询条件，isUp是否为上拉加载push数据

<template>
	<view class="drafts"></view>
</template>

<script>
	import ListMixin from '@/mixin/list.js'
	export default {
		components: {},
		mixins: [ListMixin],
		data() {
			return {
				// 查询条件
				scheduleSearch: {
					searchType: ''
                }
			};
		},
		computed: {},
		watch: {},
		onLoad(e) {},
		onShow() {},
		created() {
            // 页面调用混合方法
			this.initDataList(this.scheduleSearch)
		},
		methods: {}
	}
</script>

<style lang="scss"></style>