scroll-view自定义下拉刷新样式

要自定义 `scroll-view` 的下拉刷新样式，你可以使用 `scroll-view` 的 `refresher-enabled` 属性来启用下拉刷新，并使用 `refresher-triggered` 属性来监听下拉刷新事件。

首先，你需要在 `scroll-view` 标签中添加 `refresher-enabled` 和 `refresher-triggered` 属性。其中，`refresher-enabled` 用于启用下拉刷新功能，而 `refresher-triggered` 用于监听下拉刷新事件并触发相应的操作。

接下来，你可以使用自定义样式来美化下拉刷新的效果。你可以在 `scroll-view` 标签内部添加一个 `view` 组件，并在这个组件中编写你想要的下拉刷新样式。

以下是一个示例代码：

<scroll-view refresher-enabled="{{true}}" refresher-triggered="{{refreshing}}" bindrefresherrefresh="onRefresh">
  <view class="refresher">
    <view class="icon"></view>
    <view class="text">下拉刷新</view>
  </view>
  <!-- 在这里放置 scroll-view 的内容 -->
</scroll-view>

在上面的示例代码中，我们使用了一个名为 `refresher` 的 `view` 组件来构建下拉刷新的样式。你可以根据自己的需求自定义 `refresher` 的样式，比如设置背景颜色、图标、文字等。

接下来，在对应的小程序页面的 JS 文件中，你需要定义 `onRefresh` 方法，以便在下拉刷新事件触发时执行相应的操作。例如，可以在该方法中发送请求获取最新数据：

Page({
  data: {
    refreshing: false
  },
  onRefresh: function() {
    // 下拉刷新事件触发时执行的操作
    // 发送请求获取最新数据
    // ...
    // 请求完成后，将 refreshing 设置为 false 结束下拉刷新的状态
    this.setData({
      refreshing: false
    });
  }
})

在上面的代码中，我们定义了一个名为 `onRefresh` 的方法来处理下拉刷新事件。你可以在该方法中编写你想要的下拉刷新逻辑，比如发送请求获取最新数据。在请求完成后，记得将 `refreshing` 设置为 `false`，以结束下拉刷新的状态。

最后，你还可以使用 CSS 来进一步美化下拉刷新的样式。你可以在对应的 WXSS 文件中添加相应的样式规则来自定义 `refresher` 的外观。

希望这些信息能对你有所帮助！如有任何问题，请随时提问。