当前位置：首页 > uni-app

uniapp底部翻页

2026-02-05 23:58:39uni-app

uniapp实现底部翻页功能

在uniapp中实现底部翻页功能通常需要结合滚动视图和分页逻辑。以下是几种常见实现方式：

滚动视图结合触底加载

使用scroll-view组件监听触底事件实现分页加载：

<template>
  <scroll-view 
    scroll-y 
    @scrolltolower="loadMore"
    style="height: 100vh">
    <!-- 列表内容 -->
    <view v-for="item in list" :key="item.id">
      {{ item.content }}
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading">加载中...</view>
    <view v-if="noMore" class="no-more">没有更多了</view>
  </scroll-view>
</template>

分页数据请求逻辑

实现分页加载的核心JavaScript逻辑：

export default {
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      loading: false,
      noMore: false
    }
  },
  methods: {
    async loadData() {
      if (this.loading || this.noMore) return

      this.loading = true
      try {
        const res = await api.getList({
          page: this.page,
          pageSize: this.pageSize
        })

        if (res.data.length) {
          this.list = this.list.concat(res.data)
          this.page++
        } else {
          this.noMore = true
        }
      } finally {
        this.loading = false
      }
    },
    loadMore() {
      this.loadData()
    }
  },
  mounted() {
    this.loadData()
  }
}

优化加载提示

可以添加更友好的加载状态提示：

.loading, .no-more {
  padding: 20rpx;
  text-align: center;
  color: #999;
}
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用页面生命周期

在页面生命周期中处理分页重置：

onPullDownRefresh() {
  this.page = 1
  this.list = []
  this.noMore = false
  this.loadData().finally(() => {
    uni.stopPullDownRefresh()
  })
}

第三方组件方案

可以使用uni-ui中的load-more组件简化实现：

uniapp底部翻页

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="item in list" :title="item.title" />
    </uni-list>
    <uni-load-more :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
  </view>
</template>