使用v-loadmore="nomore" 下拉框触底方法

`v-loadmore`是Vue.js的一个指令，它可以监听页面滚动事件，当页面滚动到指定位置时，触发指定的方法。在使用`v-loadmore`时，我们可以将其绑定到一个包含数据的元素上，当数据满足某个条件时，就可以触发加载更多的方法。

例如，我们可以将`v-loadmore`绑定到一个列表容器上，当列表滚动到底部时，就触发加载更多的数据。

下面是一个使用`v-loadmore`实现下拉框触底加载的示例：

<template>
  <div class="scroll-container" v-loadmore="loadMore">
    <ul class="list">
      <li v-for="item in list" :key="item.id">{{ item.text }}</li>
    </ul>
    <div class="loading" v-if="loading">加载中...</div>
    <div class="no-more" v-if="noMore">没有更多了</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 数据列表
      loading: false, // 是否正在加载数据
      noMore: false, // 是否没有更多数据
      currentPage: 1 // 当前页码
    };
  },
  methods: {
    // 加载更多数据
    async loadMore() {
      if (this.loading || this.noMore) return; // 如果正在加载或没有更多数据了，则不再触发加载更多
      this.loading = true; // 设置正在加载数据的状态
      const res = await fetch(`api/data?page=${this.currentPage}`);
      const data = await res.json(); // 获取数据
      this.loading = false; // 设置加载完成的状态
      if (data.length) {
        this.currentPage++; // 如果有数据，则页码+1
        this.list.push(...data); // 将新数据添加到列表中
      } else {
        this.noMore = true; // 如果没有数据了，则设置没有更多数据的状态
      }
    }
  }
};
</script>

在上面的示例中，我们将`v-loadmore`指令绑定到了一个名为`scroll-container`的元素上，并指定了触底时要执行的方法`loadMore`。在`loadMore`方法中，我们首先判断当前是否正在加载数据或者已经没有更多数据了，如果是则直接返回；否则，我们将`loading`状态设置为`true`，表示正在加载数据。然后，我们使用`fetch`函数向后端请求数据，并将数据添加到列表中。如果返回的数据为空，则设置`noMore`状态为`true`，表示没有更多数据了。最后，我们将`loading`状态设置为`false`，表示加载完成。通过这样的方式，我们可以实现下拉框触底加载更多数据的功能。