mescroll->mescroll-body

方便的下拉刷新，上拉分页加载的组件
官网地址http://www.mescroll.com/uni.html#mescrolluni

我的项目中mescroll-uni的路径 uniapp/components/mescroll-uni

在main.js全局引入mescroll-body组件（也可在页面单独引入）

import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
Vue.component('mescroll-body', MescrollBody)

页面

<template>
    <view class="user-collection">
        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
            <!-- 数据列表 -->
            <view v-for="(item, index) in goodsList" :key="index">
            </view>
        </mescroll-body>
        <view>fixed元素需写在mescroll-body的外面,否则下拉刷新时会降级为absolute </view>
    </view>
</template>

<script>
    import {
        apiCollectLists, //获取商品列表接口
    } from "@/api/user";
    // *引入mescroll-mixins.js 根据项目实际路径
    import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins';
    export default {
        mixins: [MescrollMixin], // *使用mixin
        data() {
            return {
                goodsList: [], // 商品列表
            }
        },

        methods: {
            /*下拉刷新的回调, 有3种处理方式:*/
            downCallback() {
                // 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
                // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )     
                this.mescroll.resetUpScroll()
            },
            /*上拉加载的回调*/
            upCallback(page) {

                let pageNum = page.num // 第几页
                let pageSize = page.size // 每页条数
                // 根据实际接口数据进行相应调整
                apiCollectLists({
                    page_no: pageNum,
                    page_size: pageSize,
                }).then(({
                    lists,
                    page_size,
                    count,
                }) => {
                    // 如果是第一页需手动置空列表
                    if (page.num == 1) this.goodsList = []
                    // 追加新数据
                    this.goodsList = [...this.goodsList, ...lists]
                    //方法二(推荐): 后台接口有返回列表的总数据量 count, 判断是否有下一页
                    this.mescroll.endBySize(page_size, count);
                }).catch(() => {
                    // 请求失败,隐藏加载状态
                    this.mescroll.endErr()
                })
            },
        }
    }
</script>