vue上滑下滑屏幕翻页

你可以使用Vue插件vue-infinite-loading来实现上滑下滑屏幕翻页效果。该插件支持自定义loading图标、是否显示loading状态等配置。以下是一个简单的示例：

1. 安装插件

npm install vue-infinite-loading --save

2. 在Vue组件中引用插件

import InfiniteLoading from 'vue-infinite-loading';

export default {
  components: {
    InfiniteLoading
  },
  data() {
    return {
      page: 1, // 当前页码
      list: []  // 列表数据
    }
  },
  methods: {
    // 加载更多数据
    loadMore() {
      // 发送ajax请求获取数据
      axios.get('/api/list', {
        params: {
          page: this.page
        }
      }).then(res => {
        this.list = this.list.concat(res.data);
        this.page++;
        // 停止loading状态
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
      })
    }
  }
}

3. 在模板中使用插件

<template>
  <div>
    <ul>
      <!-- 渲染列表数据 -->
      <li v-for="item in list" :key="item.id">{{ item.title }}</li>
    </ul>
    <!-- 配置插件 -->
    <infinite-loading @infinite="loadMore" ref="infiniteLoading">
      <div slot="no-more">没有更多数据了</div>
    </infinite-loading>
  </div>
</template>

上述示例中，当用户滑动到页面底部时，会触发`loadMore`方法来加载更多数据，直到没有更多数据为止。同时，插件还提供了`no-more`插槽来显示“没有更多数据了”的提示信息。