支付宝小程序 | 下拉刷新、自动刷新、上拉加载

下拉刷新

（一）onPullDownRefresh方法

模拟器效果展示

实现如下

1、配置下拉选项

demo.json

{
  "pullRefresh": true
}

2、定义下拉方法

demo.js

onPullDownRefresh() {
  //做相应的逻辑处理
},

3、停止下拉

在加载完数据后停止下拉

my.stopPullDownRefresh()

如上案例完整代码如下

demo.axml

<view class="demo">
  <text a:if="{{ list.length == 0 ? true: false }}">没数据？试试下拉刷新😆</text>
  <view a:for="{{ list }}">
    {{item.name}}
  </view>
</view>

demo.less

.demo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    width: 100%;
}

demo.json

{
  "usingComponents": {},
  "styleIsolation": "apply-shared",
  "pullRefresh": true
}

demo.ts

Page({
  data: {
    list: [],
  },
  onLoad() {},
  onPullDownRefresh() {
    this.getList()
  },
  getList() {
    setTimeout(()=>{
      this.setData({
        list: [
          { name: '螺蛳粉', value: 1 },
          { name: '酸辣粉', value: 2 },
          { name: '羊肉粉', value: 3 },
        ],
      })
      my.stopPullDownRefresh()
    },1000)
  },
})

（二）自定义下拉刷新

参考文档：https://blog.csdn.net/qq_42345108/article/details/124321126

自动刷新

（一）my.startPullDownRefresh() 方法

效果

调用 my.startPullDownRefresh 后触发下拉刷新动画，效果与用户手动下拉刷新一致（会触发 onPullDownRefresh 监听方法）。

当处理完数据刷新后，my.stopPullDownRefresh 可停止当前页面的下拉刷新。

如上案例完整代码如下

demo.axml

<view class="demo">
  <block a:if="{{ list.length == 0 ? true: false }}">
    <view a:if="{{ time==0 ? true:false }}" class="button" onTap="handleStartRefresh">
      开启自动刷新
    </view>
    <view a:else>
      {{time}}秒后自动刷新
    </view>
  </block>
  <view a:else class="list">
    <text>刷新成功😆</text>
    <view a:for="{{ list }}"> {{item.value}}碗---{{item.name}}</view>
  </view>
</view>

demo.less

.demo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 60px;
  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 40px;
    border-radius: 20px;
    color: #FFFFFF;
    background: #FFA336;
  }
  .list{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

demo.json

{
  "usingComponents": {},
  "styleIsolation": "apply-shared",
  "pullRefresh": true
}

demo.ts

Page({
  data: {
    list: [],
    loading: false,
    time: 0,
  },
  onPullDownRefresh() {
    this.setData({
      list: [
        ...[...Array(10)].map((_, i) => ({
          value: i + 1,
          name: '螺蛳粉',
        })),
      ],
    })
    my.stopPullDownRefresh()
  },
  handleStartRefresh() {
    this.setData({
      time: 5,
    })
    setInterval(() => {
      if (this.data.time == 1) {
        my.startPullDownRefresh()
        return
      }
      this.setData({
        time: this.data.time - 1,
      })
    }, 1000)
  },
})

参考文档：https://opendocs.alipay.com/mini/api/ui-pulldown

上拉加载

（一）onReachBottom方法

onReachBottom在上拉触底时触发

模拟器效果展示

如上案例完整代码如下

demo.axml

<view class="demo">
  <view>
    没看够?试试上拉加载😆
  </view>
  <view a:for="{{ list }}">
    {{item.value}}碗-----{{item.name}}
  </view>
  <view a:if="{{ loading }}" class="loading">
    正在加载中~~🌻
  </view>
</view>

demo.less

.demo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 30px;
    .loading{
        margin-top: 8px;
    }
}

demo.ts

Page({
  data: {
    list: [
      ...[...Array(10)].map((_, i) => ({
        value: i + 1,
        name: '螺蛳粉',
      })),
    ],
    loading: false,
  },
  onReachBottom() {
    this.setData({
      loading: true,
    })
    const data = [
      ...[...Array(30)].map((_, i) => ({
        value: i + this.data.list.length + 1,
        name: '螺蛳粉',
      })),
    ]
    setTimeout(() => {
      this.setData({
        list: this.data.list.concat(data),
        loading:false
      })
    }, 2000)
  },
})

参考文档：https://opendocs.alipay.com/mini/framework/page-detail#onReachBottom()

（二）scroll-view组件的onScrollToLower方法

<scroll-view scroll-y="{{true}}" onScrollToLower="handleScrollToLower" style="height:100px">
    <view a:for="{{ list }}">
      {{item.value}}碗-----{{item.name}}
    </view>
  </scroll-view>

 handleScrollToLower() {
    //加载数据，做数据处理
  },

注：scroll-view必须 设置高度