uniapp 中如何实现上拉加载,下拉刷新?

原创已于 2023-08-04 10:14:17 修改 · 8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2023-07-19 10:07:13 首次发布

微信小程序专栏收录该内容

5 篇文章

订阅专栏

在uniapp中，可以使用uni-scroll-view组件结合onReachBottom和onPullDownRefresh事件实现下拉刷新和上拉加载。下拉刷新在用户向下拉动页面时触发数据更新，上拉加载则在用户滚动到底部时加载更多数据。文章提供了代码示例来说明如何配置和使用这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 uniapp 中，可以通过使用下拉刷新组件和上拉加载组件来实现上拉加载和下拉刷新。

1.onReachBottom 上拉时到底部多少距离触发的事件

2.onPullDownRefresh 下拉后触发的事件

下拉刷新

原理：在页面顶部添加一个下拉刷新区域，当用户向下拉动页面时，触发下拉刷新事件，执行相应的数据更新操作。

代码演示：

在页面中添加下拉刷新组件

<template>
  <view>
    <!-- 下拉刷新组件 -->
    <uni-scroll-view refresher-enabled refresher-triggered="@refreshData" :style="{height: winHeight + 'px'}">
      <view v-for="(item,index) in dataList" :key="index">{{item}}</view>
    </uni-scroll-view>
  </view>
</template>

2.在页面中添加下拉刷新事件处理函数，更新数据

<script>
export default {
  data() {
    return {
      dataList: [],
      winHeight: 0 // 页面高度
    }
  },
  onReady() {
    // 获取页面高度，用于设置下拉刷新组件高度
    uni.getSystemInfo({
      success: (res) => {
        this.winHeight = res.windowHeight
      }
    })
  },
  methods: {
    refreshData() {
      // 模拟数据更新
      setTimeout(() => {
        this.dataList = ['1', '2', '3']
        uni.stopPullDownRefresh() // 停止下拉刷新动画
      }, 1000)
    }
  }
}
</script>

上拉加载

原理：在页面底部添加一个触底加载区域，当用户滚动到底部时，触发触底加载事件，执行相应的数据更新操作。

代码演示：

在页面中添加上拉加载组件

<template>
  <view>
    <uni-scroll-view :style="{height: winHeight + 'px'}" scroll-y @scrolltolower="@loadMoreData">
      <view v-for="(item,index) in dataList" :key="index">{{item}}</view>
      <!-- 上拉加载组件 -->
      <view v-if="showLoading" class="loading">{{loadingText}}</view>
    </uni-scroll-view>
  </view>
</template>

2.在页面中添加加载更多数据事件处理函数，更新数据

<script>
export default {
  data() {
    return {
      dataList: [],
      winHeight: 0, // 页面高度
      showLoading: false, // 是否展示加载中提示
      loadingText: '加载中，请稍后' // 加载中提示文本
    }
  },
  onReady() {
    // 获取页面高度，用于设置滚动区域高度
    uni.getSystemInfo({
      success: (res) => {
        this.winHeight = res.windowHeight
      }
    })
  },
  methods: {
    loadMoreData() {
      if (!this.showLoading) {
        this.showLoading = true // 展示加载中提示
        // 模拟加载更多数据
        setTimeout(() => {
          let newData = ['4', '5', '6']
          this.dataList = this.dataList.concat(newData)
          this.showLoading = false // 隐藏加载中提示
        }, 1000)
      }
    }
  }
}
</script>

以上代码演示中，uni-scroll-view 是 uniapp 中的一个滚动组件，配合下拉刷新和上拉加载组件使用，可以实现下拉刷新和上拉加载效果。在上拉加载的代码演示中，loading 提示可以通过 CSS 样式来进行自定义。