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

整体使用方式如下:

<div class="notificationList">
            <ul ref="wrapper" :style="{height: contentH + 'px'}">
                <Loadmore :top-method="notificationListLoadTop" :bottom-method="notificationlListLoadBottom" :bottom-all-loaded="isAllLoaded"
                    ref="loadmore" :autoFill="false" :bottomDistance="30">
                    <li v-for="(item,index) in messageList" :key="index">
                        <p class="notificationTime font24 textC color9f9f9f" v-cloak>{{item.sendTime}}</p>
                        <div class="notification">
                            <h3 class="notificationTitle font30" v-cloak>{{item.title}}</h3>
                            <p class="font26 color9f9f9f" v-text="item.content">

                            </p>
                        </div>
                    </li>
                </Loadmore>
            </ul>
        </div>

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上面设置.

  <ul ref="wrapper" :style="{height: contentH + 'px'}">
     <loadmore>
        <!-- 具体的操作 -->
     <loadmore>
  </ul>

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

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

mint-ui的loadmore的使用