uni-app下拉刷新上拉加载功能全面解析

2023-01-21 07:03:53

在uni-app中掌握下拉刷新和上拉加载：提升用户体验的必备技能

下拉刷新

下拉刷新是一种允许用户通过向下拖拽页面顶部来重新加载数据的交互功能。当用户向下拖拽时，会触发下拉刷新组件，页面顶部会出现一个加载指示器，表示正在重新加载数据。

在uni-app中使用下拉刷新非常简单。只需在页面中添加<uni-pull-down-refresh>组件即可。该组件接受一个@refresh事件，当触发下拉刷新时，该事件将被触发。

<template>
  <view>
    <uni-pull-down-refresh @refresh="onRefresh"></uni-pull-down-refresh>
    <!-- 其他页面内容 -->
  </view>
</template>

<script>
export default {
  methods: {
    onRefresh() {
      // 触发下拉刷新时执行的函数
      // 重新加载数据并更新页面
    }
  }
}
</script>

上拉加载

上拉加载是一种允许用户通过向上拖拽页面底部来加载更多数据的交互功能。当用户向上拖拽时，会触发上拉加载组件，页面底部会出现一个加载指示器，表示正在加载更多数据。

在uni-app中使用上拉加载也非常简单。只需在页面中添加<uni-load-more>组件即可。该组件接受一个@load事件，当触发上拉加载时，该事件将被触发。

<template>
  <view>
    <!-- 其他页面内容 -->
    <uni-load-more @load="onLoadMore"></uni-load-more>
  </view>
</template>

<script>
export default {
  methods: {
    onLoadMore() {
      // 触发上拉加载时执行的函数
      // 加载更多数据并更新页面
    }
  }
}
</script>

自定义样式

你可以自定义下拉刷新和上拉加载组件的外观。例如，你可以自定义下拉刷新时的文字和图标，也可以自定义上拉加载时的文字和图标。

<template>
  <view>
    <uni-pull-down-refresh @refresh="onRefresh" text="下拉刷新..." loading-icon="/static/img/loading.png"></uni-pull-down-refresh>
    <!-- 其他页面内容 -->
    <uni-load-more @load="onLoadMore" text="上拉加载更多..." loading-icon="/static/img/loading.png"></uni-load-more>
  </view>
</template>

分页加载

在某些情况下，你需要对数据进行分页加载。例如，当数据量很大时，一次性加载所有数据会非常耗时。此时，你可以采用分页加载的方式，分批次加载数据。

<template>
  <view>
    <uni-pull-down-refresh @refresh="onRefresh"></uni-pull-down-refresh>
    <!-- 其他页面内容 -->
    <uni-load-more @load="onLoadMore" v-if="hasNextPage"></uni-load-more>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hasNextPage: true,
      page: 1
    }
  },
  methods: {
    onRefresh() {
      // 触发下拉刷新时执行的函数
      // 重置页码并重新加载数据
    },
    onLoadMore() {
      // 触发上拉加载时执行的函数
      // 如果还有更多数据，则增加页码并加载更多数据
    }
  }
}
</script>

无限滚动

无限滚动是一种非常流行的加载方式，它可以自动加载更多数据，而无需用户手动触发上拉加载。

<template>
  <view>
    <uni-pull-down-refresh @refresh="onRefresh"></uni-pull-down-refresh>
    <!-- 其他页面内容 -->
    <uni-load-more @scrolltolower="onLoadMore" distance="100"></uni-load-more>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hasNextPage: true,
      page: 1
    }
  },
  methods: {
    onRefresh() {
      // 触发下拉刷新时执行的函数
      // 重置页码并重新加载数据
    },
    onLoadMore() {
      // 当页面滚动到底部时执行的函数
      // 如果还有更多数据，则增加页码并加载更多数据
    }
  }
}
</script>