uniapp上拉加载更多通用js 采用mixins混入

非原创，此方法经过前辈的方法做了一小部分修改

封装统一的loadPage.js文件

export default {

    data() {
        return {
            initial: {
                createdIsNeed: true, // 此页面是否在创建时，调用查询数据列表接口？
                apiName: '', // API名称
                getDataListIsPage: false, // 是否分页
            },
            loadingStatus: 'loadmore', //loadmore:上滑加载更多  loading:加载中 nomore:我是有底线的 noData 显示empty组件暂无数据
            timer: {
                pull: null,
                reachBottom: null,
            },
            iconType: 'circle',
            dataForm: {}, // 请求参数
            dataList: [], // 请求到的数据
            listName:'',// 请求的数据列表名称
            page: 1, // 页码
            pageSize: 10,
            totalSize: '' // 总条数
        }
    },
    created() {
        if (this.initial.createdIsNeed) {
            this.getDataList()
        }
    },
    onPullDownRefresh() {
        this.dataList = []
        this.loadingStatus = 'loading'
        this.timer.pull = setTimeout(() => {
            this.getDataList()
        }, 1000)
    },

    onReachBottom() {
        this.loadmore()
    },
    activated() {},
    methods: {
        loadmore(){
            if (this.totalSize === this.dataList.length) {
                this.dataList.length ? this.loadingStatus = "nomore" : this.loadingStatus = "noData"
            } else {
                this.loadingStatus = "loading"
                let hideLoading = true
                this.timer.reachBottom = setTimeout(() => {
                    this.page++
                    this.getData(null, hideLoading)
                }, 1000)
            }
        },
        coverItem(item){  //转化每个列表项的数据内容 必须返回一个对象
            return item
        },
        clearTimer() {
            for (let key in this.timer) {
                clearTimeout(this.timer[key])
                this.timer[key] = null
            }
        },
        getDataList(callback) {
            this.page = 1
            this.loadingStatus = "loadmore"
            this.getData(callback)
        },
        
        // 获取数据
        getData(callback, hideLoading) {
            if(hideLoading){
                this.loadingStatus = "loading"
            }
            let args = {
                paginate: {
                    page: this.initial.getDataListIsPage ? this.page : null,
                    pageSize: this.initial.getDataListIsPage ? this.pageSize : null
                },
                ...this.dataForm
            }
            this.initial.apiName(args).then(res => {
                     let list = res[this.listName].map(this.coverItem)
                    if (this.initial.getDataListIsPage == true && this.page !== 1) {
                        this.dataList = this.dataList.concat(list)
                    } else {
                        this.dataList = list
                    }
                    this.totalSize = res.paginate.totalSize
            }).finally(() => {
                    if(this.dataList.length){
                        this.dataList.length == this.totalSize ? this.loadingStatus = "nomore" : this.loadingStatus = 'loadmore'
                    }else{
                        this.loadingStatus = "noData"
                    }
                })
        }
    },
    onHide() {
        this.clearTimer()
    },
    onUnload() {
        this.clearTimer()
    },
    destroyed() {
        this.clearTimer()
    }
}

ListLoadingMore.vue组件（我使用的是uniapp的ui框架uview 地址：https://uviewui.com）

使用示例页面

说明：

在页面中采用mixins方式混入
页面中新写同名变量/函数 会覆盖此文件中的同名变量/函数
使用时 可在页面上data中重新声明以下变量

                    apiName: queryUserList, // API地址
                    getDataListIsPage: true ,// 是否分页
                },
                listName: 'tellerList',// 请求的数据列表名称
                dataForm: { //请求参数
                     keyword: ''
                    }

提供函数

coverItem 转化得到的list列表中的对象 此函数必须返回一个object
请求得到的列表数据最后都是 dataList
若不想页面在创建时就查询 需要在使用的页面中，将inital中的createdIsNeed设为false，并在需要请求数据时，直接调用 this.getDataList()
要想下拉刷新，必须在page.json中去配置该页面的enablePullDownRefresh为true