uniapp修改scroll-view下拉刷新样式

要修改 `scroll-view` 下拉刷新的样式，需要在 `scroll-view` 中添加下拉刷新组件，并设置其相应的样式。

以下是一个示例代码：

<scroll-view class="scrollview" scroll-y bindscrolltolower="scrolltolower" bindscrolltoupper="scrolltoupper">
  <view class="refresh-view" style="height:{{refreshHeight}}px;">
    <image class="refresh-image" src="../../static/img/refresh.png"></image>
    <view class="refresh-text">{{refreshText}}</view>
  </view>
  <!-- 此处为scroll-view的内容 -->
</scroll-view>

其中，`refresh-view` 为下拉刷新的容器，`refresh-image` 为下拉刷新的图标，`refresh-text` 为下拉刷新的文字。

接着，在 js 文件中设置下拉刷新的相关逻辑和样式：

Page({
  data: {
    refreshHeight: 0,
    refreshText: '下拉刷新',
    refreshAnimation: {}
  },
  // touchstart事件，记录下拉刷新的初始位置
  touchstart: function (e) {
    this.setData({
      startY: e.changedTouches[0].clientY
    })
  },
  // touchmove事件，计算下拉刷新的距离并更新样式
  touchmove: function (e) {
    var moveY = e.changedTouches[0].clientY
    var disY = moveY - this.data.startY
    if (disY < 0) {
      return
    }
    var scrollHeight = this.data.scrollHeight
    var refreshHeight = this.data.refreshHeight
    var progress = disY / (refreshHeight + 10) * 100
    if (progress > 100) {
      progress = 100
    }
    var refreshText = ''
    if (progress < 20) {
      refreshText = '下拉刷新'
    } else if (progress < 80) {
      refreshText = '释放立即刷新'
    } else {
      refreshText = '正在刷新...'
    }
    this.setData({
      refreshHeight: disY,
      progress: progress,
      refreshText: refreshText
    })
  },
  // touchend事件，触发下拉刷新并更新样式
  touchend: function (e) {
    var refreshHeight = this.data.refreshHeight
    var scrollHeight = this.data.scrollHeight
    var progress = this.data.progress
    if (progress < 80) {
      this.setData({
        refreshHeight: 0,
        refreshText: '下拉刷新'
      })
    } else {
      this.setData({
        refreshHeight: 50,
        refreshText: '正在刷新...'
      })
      // 触发下拉刷新
      this.refreshData()
    }
  },
  // scrolltolower事件，触发上拉加载更多
  scrolltolower: function () {
    // 触发上拉加载更多
    this.loadMoreData()
  },
  // scrolltoupper事件，触发下拉刷新
  scrolltoupper: function () {
    this.setData({
      refreshHeight: 50,
      refreshText: '正在刷新...'
    })
    // 触发下拉刷新
    this.refreshData()
  },
  // 下拉刷新的逻辑
  refreshData: function () {
    // 下拉刷新的具体实现
  },
  // 上拉加载更多的逻辑
  loadMoreData: function () {
    // 上拉加载更多的具体实现
  }
})

在 css 文件中设置相应的样式：

.scrollview {
  height: 100%;
  overflow: auto;
}

.refresh-view {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  transition: height 0.3s;
}

.refresh-image {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.refresh-text {
  font-size: 14px;
  color: #666;
}

这样就可以实现自定义 `scroll-view` 下拉刷新的样式了。