当前位置：首页 > uni-app

uniapp上滑翻页

2026-02-06 12:36:45uni-app

实现上滑翻页的基本思路

在uniapp中实现上滑翻页功能，通常需要结合页面滚动事件和分页加载逻辑。通过监听页面滚动位置，当用户滑动到页面底部时触发数据加载。

监听页面滚动事件

在页面配置中启用onReachBottom生命周期函数，这是uniapp提供的原生触底事件。当页面滚动到底部时自动触发：

onReachBottom() {
  this.loadMoreData()
}

数据加载逻辑

需要维护分页参数和加载状态，避免重复请求：

data() {
  return {
    list: [],
    page: 1,
    pageSize: 10,
    loading: false,
    noMore: false
  }
},
methods: {
  async loadMoreData() {
    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, ...res.data]
        this.page++
      } else {
        this.noMore = true
      }
    } finally {
      this.loading = false
    }
  }
}

滚动视图优化

对于长列表渲染，建议使用<scroll-view>组件替代普通视图：

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

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

性能优化建议

对于大量数据渲染，应该使用虚拟列表技术。uniapp的<unicloud-db>组件或第三方插件如mescroll-uni可以提供更好的性能：

// 使用mescroll示例
import MescrollUni from 'mescroll-uni'
export default {
  components: { MescrollUni },
  data() {
    return {
      mescroll: null
    }
  },
  methods: {
    initMescroll(mescroll) {
      this.mescroll = mescroll
    },
    downCallback() {
      // 下拉刷新逻辑
    },
    upCallback() {
      // 上拉加载逻辑
    }
  }
}