第一步:在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]);
}
}
})
},
参考elementui中的官网
来源:oschina
链接:https://my.oschina.net/u/4314581/blog/3316341