vue 引入mint-ui中的 Infinite scroll 实现上拉加载更多功能

1. main.js 中全局引入min-ui 

//全局导入mint-ui组件
import MinUi from 'mint-ui'
Vue.use(MinUi);

或者按需导入

import { InfiniteScroll } from 'mint-ui';

Vue.use(InfiniteScroll);

2. html部分

<template> 
    <!--商品列表-->
    <div class="goods-continal" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="0">
        <div class="goods-item" v-for="item in goodsList" :key="item.id">
            <img :src="item.pic" :alt="item.name">
            <h3>{{ item.name }}</h3>
            <div class="about">
                <h4><span>￥{{ item.minPrice }}</span><i>￥{{ item.originalPrice }}</i></h4>
                <p><span>热卖中</span><span>剩{{ item.stores }}件</span></p>
            </div>
        </div>

        <!-- 加载状态 -->
        <div class="status-loading">
            <p v-if="isMore"><mt-spinner type="fading-circle" color="#26a2ff" :size="20"></mt-spinner>加载中</p>
            <p v-if="!isMore">没有更多了。。。</p>
        </div>
    </div>
</template>

3. JavaScript 部分

export default {
        data() {
            return {
                page: 0,   // 默认获取第一页
                pageSize: 8,    // 默认展示8个商品
                goodsList: [],    // 商品列表
                loading: false,    // 滚动触发
                isMore: true       // 获取状态
            }
        },
        methods: {
            getGoods() {
                this.$http.post('/shop/goods/list',querystring.stringify({
                    page: this.page,
                    pageSize: this.pageSize
                })).then( (res) => {
                    if(res.data.code === 0 ) {
                        this.loading = false
                        this.goodsList = this.goodsList.concat(res.data.data)
                    }else{
                        this.loading = true
                        this.isMore = false
                    }
                } )
            },
            loadMore() {
                this.loading = true;
                this.page++
                this.getGoods()              
            }   
        }
    }

注意：loadMore() 这个函数在页面首次加载就会执行，所以getGoods()方法不需要在created() 时调用

4. css 部分

.goods-continal{
    width: 95%;
    margin: 0 auto;
    padding: 5px 0;
    height: calc(100vh - 90px);     // 规定滚动高度（必要）
    overflow-y: auto;   // 高度内内容滚动（必要）
    @extend %flex;
    .goods-item{}
}