uniapp下拉分页案例

下拉分页是指在滚动页面时，当滚动到页面底部时，自动加载更多数据，以实现无限滚动的效果。在uniapp中实现下拉分页的方式较为简单，可以通过以下步骤实现：

1. 在页面的`<template>`中添加一个scroll-view组件，并设置其属性`scroll-y`为true，表示允许垂直滚动。

2. 在scroll-view组件内部添加一个容器，用来显示数据列表。

3. 在页面的`<script>`中定义一个变量`list`，用来存储数据列表，并初始化为一个空数组。

4. 在页面的`<script>`中定义一个函数`loadMore`，用来加载更多数据。函数内部可以通过调用接口获取数据，并将新数据添加到`list`数组中。

5. 在scroll-view组件上添加一个事件监听器`@scrolltolower`，用来监听滚动到底部的事件。当滚动到底部时，触发`loadMore`函数，加载更多数据。

下面是一个简单的下拉分页示例代码：

<template>
  <scroll-view scroll-y @scrolltolower="loadMore">
    <div v-for="(item, index) in list" :key="index">{{ item }}</div>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 数据列表
      page: 1, // 当前页码
      pageSize: 10, // 每页数据量
    }
  },
  methods: {
    // 加载更多数据
    loadMore() {
      // 调用接口获取数据（假设接口返回数据格式为 { data: [...] }）
      api.getData(this.page, this.pageSize).then(res => {
        // 将新数据添加到数据列表中
        this.list = this.list.concat(res.data)
        // 更新页码
        this.page++
      })
    },
  },
}
</script>

以上代码中，`api.getData`表示调用接口获取数据的方法，可以根据实际情况进行修改。同时，还可以在`loadMore`函数中添加一些判断逻辑，例如当所有数据已加载完毕时，停止加载更多数据。