实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)

朴灿烈づ我的快乐病毒、 2023-06-06 04:58 13阅读 0赞

> 做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个mescroll.js插件好一点

# 1.npm安装 #

npm install --save mescroll.js //不要使用cnpm安装

*  导入(在哪个页面使用,则在哪个页面导入(这里的话，我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入))：

import MescrollVue from ‘mescroll.js/mescroll.vue’

*  注册组件：

components: {
        MescrollVue // 注册mescroll组件
    },

*  template使用

<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit"class="scrollView"></mescroll-vue>

# 2.data里进行相关配置 #

data () {
 return {
 mescroll: null, // mescroll实例对象
 mescrollDown:{}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
 mescrollUp: { // 上拉加载的配置.
 callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
 //以下是一些常用的配置,当然不写也可以的.
 page: {
 num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
 size: 10 //每页数据条数,默认10
 },
 noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
 toTop: {
 //回到顶部按钮
 src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
 offset: 1000 //列表滚动1000px才显示回到顶部按钮
 },
 htmlContent: '下拉刷新 ', //布局内容
 empty: {
 //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
 warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
 icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
 tip: "暂无相关数据~" //提示
 }
 },
 articleList: [] // 列表数据
 }
 },
 beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
 next(vm => {
 vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
 })
 },
 beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
 this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
 next()
 },
 methods: {
 mescrollInit(mescroll) {
 this.mescroll = mescroll;
 },
 upCallback(page, mescroll) {
 this.$Request({
 url: "",
 method: "get",
 data: {
 page: page.num
 },
 success: res => {
 if (res.status == 1) {
 let data = page.num == 1 ? [] : this.articleList;
 data.push(...res.result.data);
 this.articleList = data;
 // 数据渲染成功后,隐藏下拉刷新的状态
 this.$nextTick(() => {
 mescroll.endSuccess(res.result.data.length);
 });
 }
 }
 });
 }
 }
 }

# 3.style样式 #

style
    .mescroll {
        position: fixed;
        padding-bottom: 1rem;
        top: 2px;
        bottom: 0;
        height: auto;
    }

> 具体的配置可以参考： [mescroll配置][mescroll]

# 4.加载完成后 #

*  可以在data中的mescrollUp项中进行底部没有更多数据时的提示信息,'END'及'加载中...'这些内容可以自己设置

htmlLoading: '加载中..', //上拉加载中的布局
 htmlNodata: '-- END --', //无数据的布局

> 可以查看源码进行设置:  [mescroll源码（GitHub）][mescroll_GitHub]

# 5.scroll属性在ios手机上回出现卡顿问题 #

*  在进行滚动的这个容器样式中添加这个属性：

-webkit-overflow-scrolling:touch;

*  但是的话，填加了这个兼容会导致定位为position：fixed的失去效果，看了一些资料，使用position：absolute可以解决，这个我没有具体的再去实验下，若有好的方法，还请大家能够在评论里告知下，感激不尽

> 正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^\_^）

// 查询 巡检记录列表  
            record() \{  
                this.list = \[\]  
                this.queryParams.pageNum = 1  
                this.$request.globalRequest('/business/inspection-record/findPageInspectionRecord', 'post', this.queryParams)  
                    .then(res => \{  
                        if (res\[1\].data.code === 200) \{  
                            this.list = res\[1\].data.data.list  
                            console.log(res\[1\].data.data.list);  
                            res\[1\].data.data.list.forEach((v, i) => \{  
                                if (this.queryParams.checkedList.length == 3 || this.queryParams.checkedList  
                                    .length == 0) \{  
                                    this.state = "全部"  
                                \} else if(this.queryParams.checkedList.length == 2) \{  
                                    this.state = this.state +" " + v.patrolResult  
                                    // console.log(this.state);  
                                \} else \{  
                                    this.state = v.patrolResult  
                                \}  
                            \})  
                        \} else \{  
                            uni.showToast(\{  
                                // title: JSON.stringify(res\[1\].data.msg),  
                                title: res\[1\].data.msg,  
                                icon: 'none',  
                                duration: 2000  
                            \})  
                        \}  
                    \})  
            \},  
            getNewList() \{  
                var that = this  
                that.queryParams.pageNum++  
                that.$request.globalRequest('/business/inspection-record/findPageInspectionRecord', 'post', this.queryParams)  
                    .then(res => \{  
                        if (res\[1\].data.code === 200) \{  
                            if (that.list.length == res\[1\].data.data.total) \{  
                                return uni.showToast(\{  
                                    title: '没有更多数据',  
                                    icon: 'none',  
                                    duration: 2000  
                                \})  
                            \}  
                            that.list = that.list.concat(res\[1\].data.data.list)  
                        \}  
                    \})  
            \},

[mescroll]: http://www.mescroll.com/api.html#options
[mescroll_GitHub]: https://github.com/mescroll/mescroll/blob/master/demo/base/mescroll-options.html