Taro实现下拉刷新和上拉加载详解

2024-11-26 来源：个人技术集锦

要实现下拉刷新和上拉加载要了解以下几点：
1.onPullDownRefresh()
监听用户下拉刷新事件
a.需要在全局配置的 window 选项中或页面配置中开启enablePullDownRefresh
b.可以通过 Taro.startPullDownRefresh 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
c.当处理完数据刷新后，Taro.stopPullDownRefresh 可以停止当前页面的下拉刷新
2.onReachBottom()
监听用户上拉触底事件
a.可以在全局配置的 window 选项中或页面配置中设置触发距离 onReachBottomDistance
b.在触发距离内滑动期间，本事件只会被触发一次
3.enablePullDownRefresh、backgroundTextStyle、onReachBottomDistance

属性	类型	默认值	描述
enablePullDownRefresh	boolean	false	是否开启当前页面的下拉刷新。
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为 px

更多内容请查看官方文档：
实现思路：
1.下拉刷新
配置好各项之后，在生命周期**onPullDownRefresh()中监听下拉事件，在这里实现刷新的动作
2.上拉加载
在生命周期onReachBottom()**中监听上拉触底事件（注意，只有滚动条滚动到最底部，这个事件才会被触发），在这里实现刷新动作

代码如下：

import Taro, {
    Component } from "@tarojs/taro";
import {
    AtActivityIndicator } from "taro-ui";
import {
    View } from "@tarojs/components";

// i用来判断是第几页，主要用来控制一页显示的数据
let i = 1;
class DemoList extends Component

显示全文

全部栏目

Taro实现下拉刷新和上拉加载详解