uniapp的下拉刷新功能

uniapp提供了下拉刷新组件来实现下拉刷新功能。下拉刷新组件需要在页面的json文件中进行注册，然后在页面的wxml文件中使用。

注册下拉刷新组件：

{
  "usingComponents": {
    "van-refresh": "/static/vant-weapp/refresh/index"
  }
}

使用下拉刷新组件：

<van-refresh
  @refresh="onRefresh"
  :head-height="60"
  :success-text="'刷新成功'"
  :content-style="{
    'background-color': '#f5f5f5',
    'color': '#808080',
    'font-size': '28rpx'
  }"
>
  <view slot="content">下拉刷新内容</view>
</van-refresh>

其中，van-refresh是下拉刷新组件的标签名，@refresh是下拉刷新事件，:head-height是下拉刷新头部高度，:success-text是刷新成功后的提示文字，:content-style是下拉刷新内容的样式。

下拉刷新事件可以在页面的methods中定义：

methods: {
  onRefresh() {
    console.log('下拉刷新')
    // 下拉刷新逻辑
  }
}

在下拉刷新逻辑完成后，需要调用组件的finishPullDown方法来结束下拉刷新：

this.$refs.refresh.finishPullDown()

完整的下拉刷新示例代码如下：

<template>
  <van-refresh
    ref="refresh"
    @refresh="onRefresh"
    :head-height="60"
    :success-text="'刷新成功'"
    :content-style="{
      'background-color': '#f5f5f5',
      'color': '#808080',
      'font-size': '28rpx'
    }"
  >
    <view slot="content">下拉刷新内容</view>
  </van-refresh>
</template>

<script>
export default {
  methods: {
    onRefresh() {
      console.log('下拉刷新')
      // 下拉刷新逻辑
      setTimeout(() => {
        this.$refs.refresh.finishPullDown()
      }, 2000)
    }
  }
}
</script>
``