uniapp中scroll-view自定义下拉

在uni-app中，你可以通过自定义组件来实现scroll-view的自定义下拉效果。下面是一个简单的示例：

1. 首先，创建一个自定义组件，比如命名为CustomScrollView。
在CustomScrollView.vue文件中，可以定义一个容器元素和一个下拉刷新的提示元素，如下所示：

<template>
  <view class="custom-scroll-view">
    <view class="refresh-indicator" v-show="showRefreshIndicator">
      <!-- 自定义下拉刷新的内容 -->
      <!-- ... -->
    </view>
    <scroll-view class="scroll-view-content">
      <!-- scroll-view的内容 -->
      <!-- ... -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showRefreshIndicator: false, // 是否显示下拉刷新提示
      startY: 0, // 记录开始滑动的位置
    };
  },
  methods: {
    onTouchStart(e) {
      this.startY = e.touches[0].clientY;
    },
    onTouchMove(e) {
      const currentY = e.touches[0].clientY;
      const distance = currentY - this.startY;
      if (distance > 0 && this.$refs.scrollView.scrollTop === 0) {
        // 下拉到顶部了，显示下拉刷新提示
        this.showRefreshIndicator = true;
      } else {
        // 没有下拉到顶部，隐藏下拉刷新提示
        this.showRefreshIndicator = false;
      }
    },
    onTouchEnd() {
      if (this.showRefreshIndicator) {
        // 触发下拉刷新事件
        this.$emit('refresh');
      }
      this.showRefreshIndicator = false;
    },
  },
};
</script>

<style scoped>
.custom-scroll-view {
  position: relative;
  height: 100%;
}

.refresh-indicator {
  position: absolute;
  top: -50px; /* 下拉刷新提示的高度 */
  left: 0;
  right: 0;
  height: 50px; /* 下拉刷新提示的高度 */
}

.scroll-view-content {
  height: 100%;
}
</style>

2. 在使用CustomScrollView组件的页面中，可以引入该组件并监听其下拉刷新事件，如下所示：

<template>
  <view>
    <!-- ... -->
    <custom-scroll-view @refresh="onRefresh">
      <!-- ... -->
    </custom-scroll-view>
  </view>
</template>

<script>
import CustomScrollView from '@/components/CustomScrollView';

export default {
  components: {
    CustomScrollView,
  },
  methods: {
    onRefresh() {
      // 处理下拉刷新逻辑
      // ...
    },
  },
};
</script>

通过以上步骤，你就可以实现自定义下拉刷新效果了。当用户在CustomScrollView组件内部下拉到顶部时，会触发refresh事件，你可以在onRefresh方法中处理下拉刷新的逻辑，例如发送网络请求获取最新数据，然后更新页面内容。

需要注意的是，以上示例是基于uni-app框架的实现方式，如果你使用的是其他框架或原生开发，具体实现方式可能会有所不同。