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

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