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>
//样式·········