uniapp如何在页面下拉刷新时修改刷新样式

在uniapp中，可以使用`onPullDownRefresh`事件来监听页面下拉刷新操作。当用户下拉页面时，该事件会被触发，可以在该事件中修改刷新样式。

具体来说，你可以在页面的`<template>`标签中添加一个`<view>`标签作为下拉刷新的样式，并在`<script>`标签中的`onPullDownRefresh`事件中修改该样式。例如：

<template>
  <view>
    <!-- 下拉刷新样式 -->
    <view class="refresh">下拉刷新</view>

    <!-- 页面内容 -->
    <view class="content">
      <!-- TODO: 页面内容 -->
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    // 下拉刷新事件
    onPullDownRefresh() {
      // 修改刷新样式
      uni.showNavigationBarLoading()
      setTimeout(() => {
        uni.hideNavigationBarLoading()
        uni.stopPullDownRefresh()
      }, 2000)
    }
  }
}
</script>

<style>
/* 下拉刷新样式 */
.refresh {
  text-align: center;
  padding: 20px 0;
  color: #666;
  font-size: 14px;
}
</style>

在上面的示例中，我们在`<template>`标签中添加了一个`<view>`标签作为下拉刷新的样式，并在`<script>`标签中的`onPullDownRefresh`事件中修改了该样式。具体来说，我们使用了`uni.showNavigationBarLoading()`方法显示了导航栏的loading动画，并在2秒后使用`uni.hideNavigationBarLoading()`方法隐藏了loading动画，同时使用`uni.stopPullDownRefresh()`方法停止下拉刷新。在下拉刷新期间，用户会看到`<view class="refresh">下拉刷新</view>`的文本提示。