简单封装vue移动端上拉加载更多
.load-more {
width: 100%;
color: #c0c0c0;
background: #fafafa;
font-size: 14px;
}
.no-more-text {
display: block;
width: 150px;
}
.more-tip,
.loading-tip,
.no-more-tip {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
}
.load-moudle .loading-icon {
display: inline-flex;
width: 35px;
height: 35px;
background: url('../../assets/loading.png') no-repeat;
background-size: cover;
margin-right: 5px;
animation: rotating 2s linear infinite;
}
@keyframes rotating {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(1turn);
}
}
.connecting-line {
display: inline-flex;
width: 150px;
height: 2px;
background: #ddd;
margin-left: 20px;
margin-right: 20px;
}
在父组件---引入使用：
:on-infinite-load="onInfiniteLoad" :parent-pull-up-state="infiniteLoadData.pullUpState" > <''列表内容‘’> data(){ return{ infiniteLoadData: { initialShowNum: 3, // 初始显示多少条 everyLoadingNum: 3, // 每次加载的个数 pullUpState: 2, // 子组件的pullUpState状态 pullUpList: [], // 上拉加载更多数据的数组 showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数 }, } merhods:{ onInfiniteLoad (done) { console.log(done, this.infiniteLoadData.pullUpState) if (this.infiniteLoadData.pullUpState === 1) { this.getSiteInfo() //获取列表数据的函数 } done() }