uniApp下拉刷新

下拉刷新是指用户在页面顶部向下滑动，触发刷新操作，常用于列表数据的更新。在uniApp中，可以使用自带的下拉刷新组件来实现下拉刷新功能。具体步骤如下：

1. 在需要添加下拉刷新功能的页面的`<template>`标签中添加下拉刷新组件代码：

<scroll-view class="content" scroll-y="true" enable-back-to-top>
  <!-- 下拉刷新组件 -->
  <view class="refresh" slot="refresher">
    <text class="refresh-text">{{refreshText}}</text>
    <loading class="refresh-icon" :show="refreshing"></loading>
  </view>
  <!-- 列表数据 -->
  <view class="list" v-for="(item, index) in list" :key="index">{{item}}</view>
</scroll-view>

2. 在`<script>`标签中添加下拉刷新相关的数据和方法：

export default {
  data() {
    return {
      list: [], // 列表数据
      refreshing: false, // 是否正在刷新
      refreshText: '下拉刷新', // 刷新提示文本
    }
  },
  methods: {
    // 下拉刷新事件
    onPullDownRefresh() {
      this.refreshText = '正在刷新...'
      this.refreshing = true
      // 模拟异步请求数据
      setTimeout(() => {
        this.list = ['数据1', '数据2', '数据3']
        this.refreshText = '下拉刷新'
        this.refreshing = false
        uni.stopPullDownRefresh() // 停止下拉刷新
      }, 2000)
    },
  },
}

3. 在`<style>`标签中添加下拉刷新相关的样式：

.refresh {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
  font-size: 28rpx;
  color: #999;
}

.refresh-text {
  margin-left: 20rpx;
}

.refresh-icon {
  width: 40rpx;
  height: 40rpx;
  margin-left: 10rpx;
}

在上述代码中，我们使用了`scroll-view`组件来实现滚动列表，并在其中添加了下拉刷新组件。当用户下拉列表时，会触发`onPullDownRefresh`方法，我们可以在该方法中模拟异步请求数据，并在请求完成后调用`uni.stopPullDownRefresh()`方法来停止下拉刷新。