<blockquote> 

mescroll-uni 是一个翻页组件，官方文档【点击查看】

 这里对 mescroll-uni 进行了二次封装

在 components 目录下新建一个 up-down-load.vue 

<template>
    <view>
        <mescroll-uni @init="init" :down="downOption" @down="downCallback" :up="upOption" @scroll="scroll" @up="upCallback" :top="top">
            <slot />
        </mescroll-uni>
    </view>
</template>

<script>
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    export default {
        name: 'UpDownLoad',
        components: {
            MescrollUni
        },
        props: {
            callback: {
                type: Function
            },
            top: {
                type: Number,
                default: 260
            },
            up:{
                type:Object,
                default:()=>{
                    return {}
                }
            }
        },
        data() {
            return {
                    // 下拉刷新的常用配置
                    downOption: {
                        use: true, // 是否启用下拉刷新; 默认true
                        auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                    },
                    // 上拉加载的常用配置
                    upOption: {
                        onScroll:true,
                        use: true, // 是否启用上拉加载; 默认true
                        auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                        page: {
                            num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                            size: 10 // 每页数据的数量,默认10
                        },
                        noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                        empty: {
                            tip: '暂无相关数据'
                        }
                    },
                    mescroll: null
            }
        },
        created(){
            this.assiginObj(this.upOption,this.up)
        },
        methods: {
            init(mescroll) {
                this.mescroll = mescroll;
                this.$emit('init',mescroll)
            },
            downCallback(e){
                // console.log('33333', e)
                // 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
                this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
            },
            scroll(e) {
                this.$emit('scrolls', e.scrollTop)
            },
            upCallback(mescroll) {
                this.callback(mescroll)
            },
            // 多层对象合并
            assiginObj(target = {},sources= {}){
                let obj = target;
                if(typeof target != 'object' || typeof sources != 'object'){
                    return sources; // 如果其中一个不是对象 就返回sources
                }
                for(let key in sources){
                    // 如果target也存在 那就再次合并
                    if(target.hasOwnProperty(key)){
                            obj[key] = assiginObj(target[key],sources[key]);
                    } else {
                            // 不存在就直接添加
                            obj[key] = sources[key];
                    }
                }
                return obj;
            },
        }
    }
</script>
<style lang="scss">
</style>

在页面中使用

<template>
    <view>
        <!--upDownLoad组件初始化就会调用获取数据列表-->
        <up-down-load :callback="getList" :top="0">
            <block v-for="(item,index) in list" :key="index">
                <text>{{item}}</text>
            </block>
        </up-down-load>
    </view>
</template>

<script>
import upDownLoad from '@/components/customer/up-down-load/up-down-load.vue'
export default {
    components:{
        upDownLoad
    },
    data(){
        return{
            mescroll:null,//保存该分页组件的mescroll对象
            count:0,//必须将后端返回的数据总数存储下来
            list:[],//数据列表
        }
    },
    methods:{
        getList(mescroll){
            this.mescroll = mescroll;
            let params = {},that=this;
            params.page = mescroll.num;//页码
            params.size = mescroll.size;//每页数量
            //这里我使用vuex的actions来请求数据
            that.$store.dispatch('getlist',params).then(res => {
                if(res.code == 0){
                    let list = res.data.list;//获取后端返回当前页码的数据
                    that.count= res.data.count;//存储后端返回的数据总数
                    if (mescroll.num == 1) that.list = [];//如果当前是第一页则置空数据
                    that.list = that.list.concat(list);//使用concat方法拼接数据
                    mescroll.endBySize(list.length, that.count);//调用endBySize方法,当数据长度为总数的时候结束分页
                }else{
                    mescroll.endErr()
                }
            })
        }
    }
}
</script>

个人博客：点此进入（http://xueshuai.top）

前端交流群：1063233592