axml页面
<scroll-view scroll-y="{{true}}" onScrollToLower="scrolltolower" class="schedule-scroll">
**此处为页面布局**
<!-- 上拉刷新 -->
<view class="spinner" style="{{show ? '' : 'display:none'}}">
<view class="bounce1 bounce"></view>
<view class="bounce2 bounce"></view>
<view class="bounce3 bounce"></view>
<view style="margin:20rpx 0 0 20rpx;color:#666666;">加载中...</view>
</view>
</scroll-view>
js页面
data: {
pageNum: 1,//页数
pageSize: 5,//每页个数
detailsList: [],///列表数据
mockTotal: 0,//总条数
show: false,//控制是否开始渲染分页
},
scrolltolower() { // 页面被拉到底部
if (this.data.detailsList.length < this.data.mockTotal) {
this.setData({
show: true,
pageNum: this.data.pageNum + 1
});
**此处加列表请求接口**
}
},
///请求到的数据处理
if (this.data.show) {
let towList = []
setTimeout(() => {
this.setData({//数据累加
mockTotal: res.data.data.total,
detailsList:towList.concat(this.data.detailsList,res.data.data.list),
show: false
})
}, 500);//动画时间
} else {
this.setData({//初始数据
detailsList: res.data.data.list,
mockTotal: res.data.data.total,
})
console.log(this.data)
}
****
acss页面
/* 分页 动画*/
.schedule-scroll {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
}
.spinner {
text-align: center;
height: 60rpx;
line-height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
}
.spinner .bounce {
margin-top: 20rpx;
width: 13rpx;
height: 21rpx;
display: inline-block;
animation-fill-mode: both;
margin-left: 13rpx;
transform: skewX(-15deg);
}
.spinner .bounce1 {
background: #108EE9;
animation: bouncedelay1 2.1s infinite linear;
}
.spinner .bounce2 {
background: #9DCDEF;
animation: bouncedelay2 2.1s infinite linear;
}
.spinner .bounce3 {
background: #EAECF3;
animation: bouncedelay3 2.1s infinite linear;
}
.spinner .spinner-word {
margin-top: 24rpx;
line-height: 40rpx;
height: 40rpx;
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #999999;
}
@keyframes bouncedelay1 {
0% {
background: #108EE9;
}
50% {
background: #9DCDEF;
}
100% {
background: #EAECF3;
}
}
@keyframes bouncedelay2 {
0% {
background: #9DCDEF;
}
50% {
background: #EAECF3;
}
100% {
background: #108EE9;
}
}
@keyframes bouncedelay3 {
0% {
background: #EAECF3;
}
50% {
background: #108EE9;
}
100% {
background: #9DCDEF;
}
}