uniapp移动端实现下拉刷新

Uniapp提供了mui-pullrefresh组件来实现下拉刷新。具体实现步骤如下：

1. 引入mui-pullrefresh组件

在需要实现下拉刷新的页面中，通过以下方式引入mui-pullrefresh组件：

<template>
  <view>
    <mui-pullrefresh :pullDownRefresh="onPullDownRefresh">
      <!-- 页面内容 -->
    </mui-pullrefresh>
  </view>
</template>

<script>
  import MuiPullRefresh from "@/components/mui-pullrefresh/mui-pullrefresh.vue";

  export default {
    components: {
      MuiPullRefresh
    },

    methods: {
      onPullDownRefresh() {
        // 下拉刷新回调函数
      }
    }
  }
</script>

2. 定义下拉刷新回调函数

在mui-pullrefresh组件中定义了一个名为pullDownRefresh的prop，通过该prop设置下拉刷新回调函数。当用户下拉刷新时，组件会自动调用该回调函数。

<mui-pullrefresh :pullDownRefresh="onPullDownRefresh">
  <!-- 页面内容 -->
</mui-pullrefresh>

methods: {
  onPullDownRefresh() {
    // 下拉刷新回调函数
  }
}

3. 触发下拉刷新

当用户下拉页面到一定程度时，mui-pullrefresh组件会自动触发下拉刷新，调用onPullDownRefresh回调函数。

当回调函数执行完毕后，需要通过以下方式通知mui-pullrefresh组件刷新完成：

// 通知下拉刷新完成
this.$refs.pullrefresh.endPullDownToRefresh();

完整代码如下：

<template>
  <view>
    <mui-pullrefresh :pullDownRefresh="onPullDownRefresh">
      <view class="content">
        <view v-for="(item, index) in list" :key="index" class="item">{{ item }}</view>
      </view>
    </mui-pullrefresh>
  </view>
</template>

<script>
  import MuiPullRefresh from "@/components/mui-pullrefresh/mui-pullrefresh.vue";

  export default {
    components: {
      MuiPullRefresh
    },

    data() {
      return {
        list: ["1", "2", "3", "4", "5"]
      }
    },

    methods: {
      onPullDownRefresh() {
        // 模拟数据请求
        setTimeout(() => {
          this.list.unshift(new Date().getFullYear().toString());
          // 通知下拉刷新完成
          this.$refs.pullrefresh.endPullDownToRefresh();
        }, 1000);
      }
    }
  }
</script>

<style>
  .content {
    padding: 20rpx;
  }

  .item {
    height: 50rpx;
    line-height: 50rpx;
    background-color: #fff;
    border: 1rpx solid #ddd;
    text-align: center;
    font-size: 28rpx;
  }
</style>