uni-app scroll-view 下拉刷新 h5和小程序兼容写法（自用）

<template>
  <view>
    <scroll-view
      class="scroll-view"
      scroll-y="true"
      @scrolltolower="handleScrollToLower"
      style="height: 100%;"
    >
      <!-- 内容 -->
    </scroll-view>
    <view class="loading-wrap" v-if="loading">
      <text>加载中...</text>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      loading: false
    };
  },
  methods: {
    handleScrollToLower() {
      if (!this.loading) {
        this.loading = true;
        setTimeout(() => {
          // 模拟数据加载
          // ...
 
          // 数据加载完成
          this.loading = false;
        }, 1000);
      }
    }
  }
};
</script>
 
<style>
.loading-wrap {
  display: flex;
  justify-content: center;
  padding: 20px;
}
</style>

这段代码使用了uni-app的<scroll-view>组件，并监听了scrolltolower事件，以实现下拉刷新的功能。当用户滚动到页面底部时，会触发handleScrollToLower方法，并显示加载动画，模拟数据加载，加载完成后，加载动画消失。这段代码在H5和小程序中都是兼容的。