支付宝分页---上滑刷新

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; } }