elementui无限动态加载分页
第一步:在mail.js中引入
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
第二步:安装
cnpm install vue-infinite-scroll --save
第三步:使用
<div class="schoolPlatformGroup" v-infinite-scroll="loadMore" infinite-scroll-disabled="scrollDisabled" > <ul style="list-style-type:none" v-for="(data,index) in cameraList"> <el-tag style="float: left;color: #409eff;z-index: 999;margin-top: 2px;">{{data.id}}</el-tag> <li :id="'platform'+data.id" class="platformNameTag" style="padding: 4px;margin-left: 40px;margin-right: 10px;background: #ffffff;" @click="clickPlatform(data.id)">【{{index+1}}】{{data.name}}</li> </ul> <el-button v-if="loading" style="margin-left: 90px;margin-bottom: 10px" type="warning" plain>数据加载中...</el-button> <el-button v-if="noMore" style="margin-left: 80px;margin-bottom: 10px" type="warning" plain>没有更多数据了</el-button>
schoolPlatformGroup样式,要有设置滚动条
.schoolPlatformGroup { min-width:220px; height: 920px; overflow-y: auto; margin-top: 10px; margin-left: -23px; } .schoolPlatformGroup::-webkit-scrollbar { width: 10px; height: 1px; } .schoolPlatformGroup::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgba(52, 163, 242, 0.48); } .schoolPlatformGroup::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #ededed; }
数据变量
//滚动条分页 cameraList: [], scrollbarPage: 1, scrollbarLimit: 30, scrollbarTotal: 0, loading: false,
计算属性
computed: { noMore () {
//this.cameraList.length,此长度是每次请求相机数据叠加的,this.scrollbarTotal是后台返回的数据总数 return this.cameraList.length > this.scrollbarTotal }, scrollDisabled () { //scrollDisabled == false,可以滚动 return this.loading || this.noMore } },
接口请求数据
v-infinite-scroll="loadMore"组件中的loadMore方法,每次滚动到末尾就会自动触发此方法
loadMore() { this.loading = true setTimeout(() => { console.log("loadloadloadloadloadloadloadloadloadloadloadloadloadloadloadload") this.scrollbarPage += 1 //请求相机列表 this.getCameraDataList(); this.loading = false }, 2000) },
//相机列表 getCameraDataList(){ this.$http({ url: this.$http.adornUrl(`/risk/riskcamera/getList`), method: 'get', params: this.$http.adornParams({ page: this.scrollbarPage, limit: this.scrollbarLimit, }) }).then(({ data }) => { console.log("相机列表",data) if(data.data != null){ //总数 this.scrollbarTotal = data.data.total; //列表 let list = data.data.records //this.cameraList = list; for(let i=0; i<list.length; i++){ this.cameraList.push(list[i]); } } }) },