在uni-app中,可以使用uni-scroll-view组件来实现上拉加载的功能。以下是一种常见的实现方式:

  1. 在页面中添加一个uni-scroll-view组件,并设置其scroll-y属性为true,表示该组件可垂直滚动。
<template>
  <view class="container">
    <uni-scroll-view class="list" :scroll-y="true" @scrolltolower="loadMore">
      <!-- 在此处渲染列表数据 -->
      <view v-for="(item, index) in list" :key="index">{{ item }}</view>
      <!-- 渲染加载更多提示 -->
      <view v-if="isLoading">加载中...</view>
      <view v-else-if="!hasMore">没有更多数据了</view>
    </uni-scroll-view>
  </view>
</template>
  1. 在页面的data中定义一个列表数据list和一些控制上拉加载的变量。
<script>
export default {
  data() {
    return {
      list: [], // 列表数据
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页的数据数量
      isLoading: false, // 是否正在加载
      hasMore: true // 是否还有更多数据
    };
  },
  methods: {
    // 上拉加载更多数据
    loadMore() {
      if (!this.hasMore || this.isLoading) {
        return;
      }
      this.isLoading = true;
      // 发送请求获取下一页数据
      // 示例:假设请求函数名为fetchData
      fetchData(this.pageNum + 1, this.pageSize)
        .then(res => {
          const data = res.data;
          if (data.length > 0) {
            this.list = this.list.concat(data);
            this.pageNum++;
          } else {
            this.hasMore = false;
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    }
  }
};
</script>
  1. 在loadMore方法中,根据实际情况发送请求获取下一页数据,并更新列表数据list、页码pageNum等变量。在请求完成后,需要将isLoading设置为false,表示加载完成。

上述方法使用uni-scroll-view组件实现了基本的上拉加载功能,可以根据实际需求进行调整和优化

uniapp的上拉加载用什么方法写比较好一点

原文地址: http://www.cveoy.top/t/topic/iU3N 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录