uniapp下拉分页案例

下拉分页是指在页面滚动到底部时，自动加载下一页数据，以实现无限滚动的效果。在uniapp中，可以使用`onReachBottom`事件来实现下拉分页。

以下是一个简单的下拉分页案例：

1. 在页面的`<script>`标签中定义一个`page`变量，表示当前加载的页数。

<script>
export default {
  data() {
    return {
      page: 1,
      list: []
    }
  },
  methods: {
    // 加载数据
    loadMore() {
      uni.request({
        url: 'https://example.com/api/list',
        data: {page: this.page},
        success: (res) => {
          this.list = this.list.concat(res.data)
          this.page++
        }
      })
    }
  },
  onReachBottom() {
    // 触发下拉分页
    this.loadMore()
  }
}
</script>

2. 在页面的`<template>`标签中，使用`uni-list`组件和`v-for`指令来渲染列表数据。

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="item in list" :key="item.id">
        {{ item.title }}
      </uni-list-item>
    </uni-list>
  </view>
</template>

3. 在页面的`<style>`标签中，设置`uni-list`组件的高度为屏幕高度减去导航栏高度，并添加样式以隐藏加载更多提示。

<style>
uni-list {
  height: calc(100vh - 88rpx);
}
uni-list-item.loading {
  display: none;
}
</style>

以上就是一个简单的下拉分页案例。当用户滚动到页面底部时，会触发`onReachBottom`事件，从而调用`loadMore`方法加载下一页数据，并将数据添加到列表中。在加载数据时，可以通过传递页数来实现分页效果。同时，为了美观，可以通过添加样式来隐藏加载更多提示。