vue mintui项目中loader上拉刷新的坑

在mintui项目的列表页中需要需要上拉加载更多数据，遇到了很多坑：

1、上拉不起作用
mt-loadmore父级必须添加滚动的css

overflow: scroll;

2、页面还没有滚动到底部 loadBottom事件就已经出发
首页要给mt-loadmore父级给一个高度

<div class="news-list" :style="{ height: wrapperHeight + 'px' }" ref="wrapper">
            <mt-loadmore
            :top-method="loadTop"
            :bottom-method="loadBottom"
            :auto-fill="false" //必须，若为真，loadmore 会自动检测并撑满其容器
            :bottom-all-loaded="allLoaded"
            ref="loadmore">
            <ul>
                <li class="news-item" v-for="(item,index) in newsLists" :key="index">
                    <router-link :to="{ name:'newsDetail', params: {id: item.newsId} }">
                        <div class="news-img">
                            <img v-lazy="item.newsImage" alt="item.newsTitle" srcset="">
                        </div>
                        <div class="news-content">
                            <div class="news-title">
                                {{item.newsTitle}}
                            </div>
                            <div class="news-desc">
                                <p class="news-summary">{{item.newsMsg}}</p>
                                <p>
                                    <span class="news-parise">点赞数：{{item.newsParise}}</span>
                                    <span class="news-time">发表时间：{{item.newsDate}}</span>
                                    </p>
                            </div>
                        </div>
                    </router-link>
                </li>
            </ul>
            </mt-loadmore>
        </div>

<script>
import Axios from 'axios'

export default {
    name: 'news',
    data () {
        return {
            newsLists: '',
            page: 0,
            number: 10,
            loading: true,
            allLoaded: false,
            wrapperHeight: 0
        }
    },
    mounted () {
        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top
    },
    created () {
        this.getNewsLstData(0)
    },
    methods: {
        getNewsLstData (page) {
            Axios.post('/api/getNewsData')
                .then((res) => {
                    let tolto = (page + 1) * this.number
                    let total = res.data.data.length
                    if (tolto >= total) {
                        tolto = total
                        this.allLoaded = true //判断数据是否加载完成
                    }
                    this.newsLists = page > 0 ? this.newsLists.concat(res.data.data.slice(page * this.number, (page + 1) * this.number)) : res.data.data.slice(page, tolto)
                }).catch((err) => {
                    console.log('新闻列表数据获取失败', err)
                })
        },
        loadTop () {
            this.getNewsLstData(this.page)
            this.$refs.loadmore.onBottomLoaded()
            this.topStatus = false
        },
        loadBottom () {
            if (!this.allLoaded) {
                this.page++
                this.getNewsLstData(this.page)
            } else {
                console.log('已加载全部')
            }
            this.$refs.loadmore.onBottomLoaded() // 通知loadmore组件从新渲染，计算 必须
        }
    }
}
</script>