mint-ui 实现下拉刷新 上拉加载 全步骤

    ## 复制代码就能用
        通过$emit 触发  on监听
        loadmore.vue页面
    <template>
    <div class="page-loadmore">
        <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeigh                    t + 'px' }">
        <mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-            change="handleTopChange" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" :autoFill="false"  ref="loadmore">
            <slot></slot>
            <div slot="top" class="mint-loadmore-top">
            <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
            <span v-show="topStatus === 'loading'">
                <span v-show="topStatus === 'drop'">释放更新</span>
                <mt-spinner type="snake"></mt-spinner>
            </span>
            </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 type="snake"></mt-spinner>
            </span>
            </div>
        </mt-loadmore>
        </div>
    </div>
    </template>

  <style scoped>
    .loading-background, .mint-loadmore-top span {
        -webkit-transition: .2s linear;
        transition: .2s linear
    }
    .mint-loadmore-top span {
        display: inline-block;
        vertical-align: middle
    }

    .mint-loadmore-top span.is-rotate {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .page-loadmore .mint-spinner {
        display: inline-block;
        vertical-align: middle
    }

    .page-loadmore-desc {
        text-align: center;
        color: #666;
        padding-bottom: 5px
    }

    .page-loadmore-desc:last-of-type,
    .page-loadmore-listitem {
        border-bottom: 1px solid #eee
    }

    .page-loadmore-listitem {
        height: 50px;
        line-height: 50px;
        text-align: center
    }

    .page-loadmore-listitem:first-child {
        border-top: 1px solid #eee
    }

    .page-loadmore-wrapper {
        overflow: scroll
    }

    .mint-loadmore-bottom span {
        display: inline-block;
        -webkit-transition: .2s linear;
        transition: .2s linear;
        vertical-align: middle
    }

    .mint-loadmore-bottom span.is-rotate {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    </style>

    <script type="text/babel">
    export default {
        name:"c_loadMore",
        data() {
        return {
            list: [],
            allLoaded: false,

            bottomStatus: '',
            wrapperHeight: 0,

            topStatus: '',
            //wrapperHeight: 0,
            translate: 0,
            moveTranslate: 0
        };
        },

        methods: {
        handleBottomChange(status) {
            this.bottomStatus = status;
        },
        //上拉加载更多
        loadBottom() {
    //        setTimeout(() => {
    //          let lastValue = this.list[this.list.length - 1];
    //          if (lastValue < 40) {
    //            for (let i = 1; i <= 10; i++) {
    //              this.list.push(lastValue + i);
    //            }
    //          } else {
    //            this.allLoaded = true;
    //          }
    //          this.$refs.loadmore.onBottomLoaded();
    //        }, 1500);
            this.$emit("loadBottom");
        },

        handleTopChange(status) {
            this.moveTranslate = 1;
            this.topStatus = status;
        },
        onTopLoaded() {
            this.$refs.loadmore.onTopLoaded();
        },
        onBottomLoaded() {
            this.$refs.loadmore.onBottomLoaded();
        },
        setAllLoaded(val){
            this.allLoaded = val;
        },
        translateChange(translate) {
            const translateNum = +translate;
            this.translate = translateNum.toFixed(2);
            this.moveTranslate = (1 + translateNum / 70).toFixed(2);
        },
        loadTop() {
    //        setTimeout(() => {
    //          let firstValue = this.list[0];
    //          for (let i = 1; i <= 10; i++) {
    //            this.list.unshift(firstValue - i);
    //          }
    //          this.$refs.loadmore.onTopLoaded();
    //        }, 1500);
            this.$emit("loadTop");
        },

        },

        created() {
    //      for (let i = 1; i <= 20; i++) {
    //        this.list.push(i);
    //      }
        },

        mounted() {
        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
        }
    };
    </script>



    ## 需要引入页面
    <template>
        <div>
            <Cloadmore @loadBottom="loadBottom" @loadTop="loadTop" ref="listTopic">

                <!-- 放入要加载的数据     -->
            <Cloadmore>
        </div>
    </template>

    <script>
    import Cloadmore from 'loadmore.vue'
        export default {
            data () {
                return  {
                    loader: false
                }
            },
            created(){
                ### 建议把网络请求进行封装   本人在做项目是发现loadbottom进入页面就会加载   
                    不知是本人样式原因还是怎么   首页数据加载时中是页面卷去一点 。
                    最后   请求数据成功后设置scrollTop解决
                this.$refs.listTopic.onBottomLoaded();
            
                setTimeout(function () {
                    document.querySelector('.page-loadmore-wrapper').scrollTop = 0;
                }, 0)
            },
        methods: {
                loadBottom() {  
                
                    let self = this;
                    
                    if(!this.loader){
                        return;
                    };
                    setTimeout(() => {
                    // 发送请求加载数据  数据请求成功设置为loader为 true
                        self.$refs.listTopic.onBottomLoaded();

                    }, 2000);
                },
                loadTop() {
                    let self = this;
                    setTimeout(() => {
                        // 发送请求加载数据  数据请求成功设置为loader为 true
                        self.$refs.listTopic.onTopLoaded();
                    }, 1500);
                },
            },
            components: {
                Cloadmore // 引入的组建
            }
        }
    </script>