uni-app版小程序swiper-limited-load插件

针对您提到的 uni-app 版小程序中的 swiper-limited-load 插件，虽然这不是一个官方的 uni-app 组件或插件，但基于您的需求，我可以提供一个类似的自定义实现思路，并结合代码示例。这个自定义实现将包括一个 swiper 组件，并添加有限制加载的功能。

自定义 swiper-limited-load 组件实现思路

1. 基础 swiper 组件：使用 uni-app 提供的 swiper 组件来创建滑动视图。
2. 加载更多功能：通过监听滑动事件（如 scrolltolower），在用户滑动到底部时触发加载更多数据的操作。
3. 数据限制：维护一个已加载数据的计数器，当数据达到某个限制时，停止加载更多。

代码示例

1. 创建一个自定义组件 swiper-limited-load.vue

<template>
  <view>
    <swiper
      :autoplay="false"
      :indicator-dots="true"
      :current="currentIndex"
      @scrolltolower="loadMore"
      style="height: 100%;"
    >
      <swiper-item v-for="(item, index) in items" :key="index">
        <view>{{ item }}</view>
      </swiper-item>
    </swiper>
    <view v-if="loading">Loading...</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      currentIndex: 0,
      loading: false,
      loadLimit: 20, // 限制加载的数据量
      loadedCount: 0,
    };
  },
  methods: {
    loadMore() {
      if (this.loadedCount >= this.loadLimit) return;
      this.loading = true;
      setTimeout(() => {
        for (let i = 0; i < 5 && this.loadedCount < this.loadLimit; i++) {
          this.items.push(`Item ${this.items.length + 1}`);
          this.loadedCount++;
        }
        this.loading = false;
      }, 1000); // 模拟异步加载
    },
  },
  mounted() {
    this.loadMore(); // 初始加载
  },
};
</script>

<style scoped>
/* 样式可根据需要调整 */
</style>

2. 在页面中使用该组件

<template>
  <view>
    <swiper-limited-load />
  </view>
</template>

<script>
import SwiperLimitedLoad from '@/components/swiper-limited-load.vue';

export default {
  components: {
    SwiperLimitedLoad,
  },
};
</script>

<style>
/* 页面样式 */
</style>

说明

• 上述代码实现了一个自定义的 swiper-limited-load 组件，它会在用户滑动到底部时尝试加载更多数据，直到达到设定的数据限制。
• 组件内部通过 loading 状态和 setTimeout 模拟了异步加载数据的过程。
• 在实际使用中，您可能需要将模拟的异步加载替换为真实的 API 请求。