vue基于mint-ui组件loadmore实现上拉加载更多，下拉刷新功能

这个是模拟手机写的简单样式，不要在意这些细节，为了撑满容器每次加载十二

那就开始代码了  ==》

先安装 mint-ui

在main.js中引入mint-ui的css样式和组件： 

import 'mint-ui/lib/style.css'

import { Loadmore } from 'mint-ui';

Vue.component(Loadmore.name, Loadmore);

import { Spinner } from 'mint-ui';

Vue.component(Spinner.name, Spinner);

然后再新建一个vue组件，放置你的内容：

<template>
    <div>
        <gheader :examplename="examplename"></gheader>
        <div class="page-loadmore-wrapper" :style="{ height: wrapperHeight + 'px' }">
            <mt-spinner v-show="list<1 && InitialLoading" color="#26a2ff" class="center"></mt-spinner>
            <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange"
                         :bottom-method="loadBottom" @bottom-status-change="handleBottomChange"
                         :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
                <!-- :auto-fill="true" 时页面加载完毕时 默认执行loadBottom 值为false时 自己写一个加载 -->
                <div class="hot-list">
                    <div class="hot-one hot-item" v-for="(item,index) in list" :key="index">
                        <a href="javascript:;" class="show clearfix">
                            <div class="img-box">
                                <img src="http://qn2.wkmblog.com/FrBnGzapQmFwvb-PhspYaxkXE7_T?imageView2/1/w/160/h/90" class="fl">
                            </div>
                            <h5 class="white-space">别让错误的认知毁掉我们的人生</h5>
                            <p>女孩天生就不擅长数学、女孩学不好数学是正常的。因为<span class="color_e85647">...详情</span>
                            </p>
                            <p class="read">
                                <span class="fa fa-eye"></span> 391 &nbsp;&nbsp;&nbsp;
                                <span class="fa fa-pencil-square-o"></span> 10
                            </p>
                        </a>
                    </div>
                </div>
                <div slot="top" class="mint-loadmore-top" style="text-align:center">
                    <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
                    <mt-spinner v-show="topStatus == 'loading'" color="#26a2ff"></mt-spinner>
                </div>
                <div v-if="allLoaded" style="text-align:center;" class="data-none">没有更多数据了</div>
                <div slot="bottom" class="mint-loadmore-bottom">
                    <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
                    <span v-show="bottomStatus === 'loading'">
                        <mt-spinner v-show="bottomStatus == 'loading'" color="#26a2ff"></mt-spinner>
                    </span>
                </div>
            </mt-loadmore>
        </div>
        <gfooter></gfooter>
    </div>
</template>

js操作：

export default {
        name: 'Loadmore',
        data() {
            return {
                examplename: 'Loadmore',
                pageNum: 1,//页码
                InitialLoading: true,//初始加载
                list: 0,//数据
                allLoaded: false,//数据是否加载完毕
                bottomStatus: '',//底部上拉加载状态
                wrapperHeight: 0,//容器高度
                topStatus: '',//顶部下拉加载状态
            }
        },
        mounted() {
            let windowWidth = document.documentElement.clientWidth;//获取屏幕宽度
            if (windowWidth >= 768) {//这里根据自己的实际情况设置容器的高度
                this.wrapperHeight = document.documentElement.clientHeight - 105;
            } else {
                this.wrapperHeight = document.documentElement.clientHeight - 80;
            }
            setTimeout(() => {//页面挂载完毕 模拟数据请求 这里为了方便使用一次性定时器
                this.list = 12;
            }, 1500)
        },
        methods: {
            handleBottomChange(status) {
                this.bottomStatus = status;
            },
            loadBottom() {
                this.handleBottomChange("loading");//上拉时 改变状态码
                this.pageNum += 1;
                setTimeout(() => {//上拉加载更多 模拟数据请求这里为了方便使用一次性定时器
                    if (this.pageNum <= 3) {//最多下拉三次
                        this.list += 12;//上拉加载 每次数值加12
                    } else {
                        this.allLoaded = true;//模拟数据加载完毕 禁用上拉加载
                    }
                    this.handleBottomChange("loadingEnd");//数据加载完毕 修改状态码
                    this.$refs.loadmore.onBottomLoaded();
                }, 150000);
            },
            handleTopChange(status) {
                this.topStatus = status;
            },
            loadTop() {//下拉刷新 模拟数据请求这里为了方便使用一次性定时器
                this.handleTopChange("loading");//下拉时 改变状态码
                this.pageNum = 1;
                this.allLoaded = false;//下拉刷新时解除上拉加载的禁用
                setTimeout(() => {
                    this.list = 12;//下拉刷新 数据初始化
                    this.handleTopChange("loadingEnd")//数据加载完毕 修改状态码
                    this.$refs.loadmore.onTopLoaded();
                }, 1500);
            },
        }
    }

基本css样式：

.page-loadmore-wrapper {
        overflow: scroll;
        z-index: 100;
    }

    .hot-list {
        padding: 0 8px;
    }

    .hot-item {
        padding: 10px 0;
    }

    .hot-one {
        overflow: hidden;
        border-bottom: 1px dashed #ccc;
    }

    .hot-one a img {
        padding-right: 10px;
    }

    .hot-item a img {
        width: 135px;
        height: 90px;
    }

    .fl {
        float: left;
    }

    .hot-one a h5 {
        margin-top: 2px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-bottom: 6px;
        font-size: 16px;
        color: #000;
    }

    .hot-one a p {
        font-size: 12px;
        color: #828282;
        margin: 0 0 3px;
    }

    .color_e85647 {
        color: #e85647;
    }

    div.hot-list > div:first-child .img-box {
        overflow: hidden;
    }

    div.hot-list > div:first-child img {
        width: 100%;
        height: auto;
        padding-right: 0;
    }

写完这些  基本上就能够实现上拉加载下拉刷新的功能了  然后就是在事件里面加上网络请求把数据渲染在视图上

项目演示地址：http://mint.wkmblog.com/LoadMore

更新日志

2019-1-6      删除多余无用代码，添加文字提示与动画提示结合(动画与文字的使用根据实际情况，也可使用默认的提示，这里只是展示用法)

      top的slot插槽和bottom的slot插槽分别修改为：

<div slot="top" class="mint-loadmore-top" style="text-align:center">
     <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
      <mt-spinner v-show="topStatus == 'loading'" color="#26a2ff"></mt-spinner>
      <span class="mint-loadmore-text">{{ topText }}</span>
</div>
<div slot="bottom" class="mint-loadmore-bottom">
     <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
     <mt-spinner v-show="bottomStatus == 'loading'" color="#26a2ff"></mt-spinner>
     <span class="mint-loadmore-text">{{ bottomText }}</span>
</div>

      data中添加数据：

topText: '',
topPullText: '下拉刷新',
topDropText: '释放更新',
topLoadingText:  '加载中...',
bottomText: '',
bottomPullText:  '上拉刷新',
bottomDropText:  '释放更新',
bottomLoadingText:  '加载中...',

      watch监听数据变化：

watch: {
    topStatus(val) {
        switch (val) {
            case 'pull':
                 this.topText = this.topPullText;
                 break;
             case 'drop':
                  this.topText = this.topDropText;
                  break;
              case 'loading':
                  this.topText = this.topLoadingText;
                  break;
         }
     },
     bottomStatus(val) {
         switch (val) {
              case 'pull':
                  this.bottomText = this.bottomPullText;
                  break;
              case 'drop':
                  this.bottomText = this.bottomDropText;
                  break;
              case 'loading':
                  this.bottomText = this.bottomLoadingText;
                  break;
          }
     }
},

此时，上拉下拉都会出现如上面三张图的动画+文字提示。