支付宝小程序-上拉加载，下拉刷新

准备工作（坑）

官网-下拉刷新：https://opendocs.alipay.com/mini/api/wo21qk
下拉刷新的准备工作（坑）
● 需要在 app.json 的 window 选项中配置 “allowsBounceVertical”:“YES”，在页面对应的 .json 配置文件中配置 “pullRefresh”:true 选项，才可开启页面下拉刷新事件。

所有代码

html

<view>
  <view class="myscroll-wrap">
    <view class="item" a:for="{
   
   {list}}">{
   
   {index+1}} 第{
   
   {pageIndex}}页</view>
    <view class="loading" a:if="{
   
   {loading}}">正在加载中...</view>
  </view>
</view>

css

.myscroll-wrap .item{
  height: 200rpx;
  padding: 30rpx;
  border-bottom: 1rpx solid ;
}
.loading{
  display: flex;
  width: 100%;
  height: 100rpx;
  background: #eee;
  align-items: center;
  justify-content: center;
}

js

Page({
  data: {
    list:[],
    pageIndex: 0,
    pageNum: 10, 
    totalPage: 5,
    loading: false,
    isPullDownRefresh: false, // 是否在下拉刷新
  },
  onLoad() {
    this.getdata();
  },
  onPullDownRefresh() {
    // 页面被下拉
    console.log('页面被下拉: ');
    this.setData({isPullDownRefresh: true});
    this.getdata(1);
  },
  onReachBottom() {
    // 页面被拉到底部
    console.log('页面被拉到底部: ');
    if(this.data.pageIndex >= this.data.totalPage){
      console.log('加载完毕');
      this.setData({loading: false});
      return
    }
    this.getdata();
  },
  async getdata(pageIndex){
    if(this.data.isPullDownRefresh){
      this.setData({
        pageIndex: 1,
        list: []
      }) 
    }
    console.log('获取数据: ');
    console.log('this.data.pageIndex: ', this.data.pageIndex);
    this.setData({loading: true});
    let list = this.data.list;
    for(let i=1; i<11;i++){
      list.push(i);
    }
    setTimeout(() => {
      this.setData({
        list,
        pageIndex: (this.data.pageIndex)+1,
        loading: false,
        isPullDownRefresh: false
      })  
      my.stopPullDownRefresh()
    }, 3000);
  }
});