mint-ui的loadmore的使用

项目中需要用到下拉刷新与上拉加载,于是就用到了mint-ui里面的loadmore组件,下面就来记录下loadmore组件的使用方式与注意事项.
首先上图,看下我在项目里面是怎么使用的.

整体使用方式如下:

            

                
                    

                        
{{item.sendTime}}
                        

                            
{{item.title}}
                            


                            
                        
                    
                
            
        

1:loadmore组件的引入与配置.

import { Loadmore } from 'mint-ui';
Vue.component(Loadmore.name, Loadmore);

components: {
            "v-header": Header,
            Loadmore,
        }

2:顶部下拉刷新的方法:

①:对应的是loadmore组件中的 :top-method的方法.
②: 在顶部上拉刷新的方法中,最后都必须要调用 this.$refs.loadmore.onTopLoaded()这个方法.
③:使用loadmore肯定就是为了分页,肯定要将分页重置为1.

            notificationListLoadTop() {
                this.current = 1;//重置分页为1
               //其他的数据请求
                this.$refs.loadmore.onTopLoaded();
            }

3:底部上拉刷新的方法:

①:对应的是loadmore组件中的 :bottom-method的方法.
②: 在顶部上拉刷新的方法中,最后都必须要调用 this.$refs.loadmore.onTopLoaded()这个方法.
在结束前同时要将allLoaded设置为true.表示数据已全部获取完毕.
allLoaded在data中默认设置为false.

notificationlListLoadBottom() {
                //数据请求.
                this.allLoaded = true; // 若数据已全部获取完毕
                this.$refs.loadmore.onBottomLoaded();
            }

4:解决在手机上可以查看,pc上无法查看的问题.

因为list是通过后台获取的,可能会存在没有高度的情况,给loadmore组件的父元素添加高度就好了.
在html上面设置.

在js中的mounted钩子里面给盒子增加高度.

mounted() {
            this.$nextTick(function () {
                 this.contentH = document.documentElement.clientHeight - 
                 this.$refs.wrapper.getBoundingClientRect().top;
            }),
            
        },