uniapp实现h5下拉触发加载下一页

在uni-app中，你可以通过监听页面滚动事件来实现H5下拉触发加载下一页的效果。下面是一个简单的示例代码：

1. 在页面的`<script>`标签中，定义一个变量`currentPage`来表示当前页数，以及一个布尔变量`isLoading`来表示是否正在加载数据。

<script>
export default {
  data() {
    return {
      currentPage: 1,
      isLoading: false
    };
  },
  methods: {
    // 加载下一页数据的方法
    async loadNextPage() {
      if (this.isLoading) return;
      
      this.isLoading = true;
      
      // 模拟异步加载数据
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 加载完成后更新当前页数和加载状态
      this.currentPage++;
      this.isLoading = false;
    },
    // 监听页面滚动事件
    onScroll(event) {
      // 获取页面滚动的距离
      const scrollTop = event.target.scrollTop;
      const scrollHeight = event.target.scrollHeight;
      const clientHeight = event.target.clientHeight;
      
      // 判断是否滚动到底部，并且不是正在加载数据
      if (scrollTop + clientHeight >= scrollHeight && !this.isLoading) {
        this.loadNextPage();
      }
    }
  }
};
</script>

2. 在页面的`<template>`标签中，将`@scroll`事件绑定到页面的根元素上，并使用`v-once`指令确保只绑定一次。

<template>
  <view @scroll.once="onScroll">
    <!-- 页面内容 -->
  </view>
</template>

这样，当页面滚动到底部时，`loadNextPage`方法会被调用，你可以在该方法中触发加载下一页的逻辑。注意在真实的应用中，你需要根据自己的业务需求来实现具体的数据加载逻辑。