mint-ui 数据列表无限加载

mint-ui 数据列表无限加载

当中的参数可以根据自己的数据格式来更改以满足需求

<template>
            <div class="ulDiv" >
                <ul class="projectUl"
                    v-infinite-scroll="loadMore"
                    infinite-scroll-disabled="isMoreLoading"
                    :infinite-scroll-immediate-check="true"
                    infinite-scroll-distance="10">
                    <li v-for="(item,index) in list" :key="index">
                    //循环加载数据
                        <div>
                            <p>{{item.xxxxxx}}</p>
                        </div>
                    </li>
                </ul>
                <!--显示加载中-->
                <div v-if="isLoading">
                    <mt-spinner type="snake" class="loading-more"></mt-spinner>
                    <span>加载中...</span>
                </div>
                <div class="no-more" v-if="noMore">没有更多了~</div>
            </div>
      </div>
      //js部分      
<script>
import LinkTab from '@/components/LinkTab.vue'
import Vue from 'vue'
import { Spinner, InfiniteScroll,} from 'mint-ui'
Vue.use(InfiniteScroll)
Vue.component(Spinner.name, Spinner)
 
export default {
    name: 'Project',
    data () {
        return {
            list: [],
            isLoading: false, // 加载中转菊花
            isMoreLoading: true, // 加载更多中
            noMore: false, // 是否还有更多
            pageInfo: { // 分页信息
                page: 1,   
                page_size: 15,
                total: 0, // 总条数
                totalPage: 1 // 总分页数
            }
        }
    },
    created () {
    },
    mounted () {
        this.getProjectInfo()
    },
    components: {
        LinkTab
    },
    methods: {  
        getProjectInfo (type) { // 获取项目列表
            let _this = this
            this.isLoading = true
            this.$http.get('url', {
                params: {
                  //请求所需要的参数
                }
            }).then((res) => {
                let datas = res.data
                if (datas.code==200) {  //成功之后
                    if (type === 'loadMore') {   
                        this.list = this.list.concat(datas.data.data)
                    } else {
                        this.list = datas.data.data
                    }
                    // 设置分页
                    this.pageInfo.total = datas.data.total   //接口数据不同，需要修改成自己接口内数据长度
                    this.pageInfo.totalPage = Math.ceil(this.pageInfo.total / this.pageInfo.page_size)
                    console.log('总页数', Math.ceil(this.pageInfo.total / this.pageInfo.page_size))
                } else {
                    Toast({
                        message: datas.msg,
                        duration: 2000
                    })
                }
                this.isLoading = false
                this.isMoreLoading = false
            })
        },
        loadMore () { // 加载更多
            this.pageInfo.page += 1 // 增加分页
            this.isMoreLoading = true // 设置加载更多中
            this.isLoading = true // 加载中
            console.log(this.pageInfo.page, this.pageInfo.totalPage)
            if (this.pageInfo.page > this.pageInfo.totalPage) { // 超过了分页  但是判断条件不一定相同，
                this.noMore = true // 显示没有更多了
                this.isLoading = false // 关闭加载中
                return false
            }
            // 缓冲
            setTimeout(() => {
                this.getProjectInfo('loadMore')
            }, 100)
        }
    }
}
</script>

//样式·········