vue移动UI框架滑动加载数据的方法

发布时间：2024/02/05

下面给出完整的攻略。

概述

使用vue移动UI框架实现滑动加载数据的方法，其本质是监听页面滚动事件，当页面滚动到一定位置时触发加载数据的操作。具体来说，我们需要通过以下步骤来实现：

监听滚动事件，计算当前页面是否滚动到了底部；
如果滚动到了底部，触发加载数据的操作；
在加载数据的过程中，需要显示加载动画或提示。

代码实现

1. 监听滚动事件

在vue组件的mounted生命周期函数中，通过window.addEventListener监听scroll事件，实现对页面滚动事件的监听。同时定义一个状态量loading，用于标识当前是否正在加载数据。

<template>
  <div class="main-content">
    <!-- 页面内容 ... -->

    <!-- 显示加载提示 -->
    <div v-show="loading" class="loading">
      正在加载...
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 是否正在加载数据
      loading: false,
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 监听滚动事件
    handleScroll() {
      // 判断页面是否滚动到了底部
      if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.documentElement.scrollHeight && !this.loading) {
        // 触发加载数据操作
        this.loadData()
      }
    },
    // 加载数据
    async loadData() {
      // 显示加载提示
      this.loading = true

      // 调用后台接口加载数据
      // ...

      // 隐藏加载提示
      this.loading = false
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

2. 显示加载提示

在页面中添加一个loading元素，用于显示加载提示。在数据加载中，通过修改loading状态的值来控制其显示或隐藏。可以根据需要，定义样式来美化加载提示。

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}
.loading::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-top: 2px solid #ccc;
  border-radius: 100%;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

示例说明

示例1：使用vant的InfiniteLoading组件

在Vue移动UI框架vant中，已经内置了一个InfiniteLoading无限滚动组件，可以方便地实现滑动加载数据的功能。只需要通过配置组件的属性，就可以实现加载数据、显示提示等操作。

<template>
  <div class="main-content">
    <!-- 页面内容 ... -->

    <!-- 使用InfiniteLoading组件 -->
    <infinite-loading :on-infinite="loadData" :spinner="loading" direction="bottom">
      <div slot="no-more">已经加载完了所有数据</div>
    </infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'

export default {
  data() {
    return {
      // 是否正在加载数据
      loading: false,
      // 当前页码
      currentPage: 1,
      // 每页加载的条数
      pageSize: 10,
      // 数据列表
      dataList: [],
      // 是否已经加载完所有数据
      noMoreData: false
    }
  },
  components: {
    InfiniteLoading
  },
  methods: {
    // 加载数据
    async loadData($state) {
      // 如果已经加载完所有数据，直接返回
      if (this.noMoreData) {
        $state.complete()
        return
      }

      // 显示加载提示
      this.loading = true

      // 调用后台接口加载数据
      // ...

      // 隐藏加载提示
      this.loading = false

      // 更新列表数据
      if (dataList.length > 0) {
        this.currentPage++
        this.dataList = [...this.dataList, ...dataList]

        // 如果当前页码已经超过了总页码数，设置noMoreData为true
        if (this.currentPage > totalPage) {
          this.noMoreData = true
        }

        // 提示数据已经加载完了
        if (this.noMoreData) {
          $state.complete()
        } else {
          $state.loaded()
        }
      } else {
        $state.complete()
      }
    }
  }
}
</script>

示例2：使用mint-ui的InfiniteLoading组件

在Vue移动UI框架mint-ui中，也内置了一个InfiniteLoading无限滚动组件，可以实现滑动加载数据的功能。同样地，只需要通过配置组件的属性，就可以实现加载数据、显示提示等操作。

<template>
  <div class="main-content">
    <!-- 页面内容 ... -->

    <!-- 使用InfiniteLoading组件 -->
    <infinite-loading :spinner="loading" @infinite="loadData" spinner-color="#2db7f5">
      <div slot="no-more">已经加载完了所有数据</div>
    </infinite-loading>
  </div>
</template>

<script>
import { InfiniteLoading } from 'mint-ui'

export default {
  data() {
    return {
      // 是否正在加载数据
      loading: false,
      // 当前页码
      currentPage: 1,
      // 每页加载的条数
      pageSize: 10,
      // 数据列表
      dataList: [],
      // 是否已经加载完所有数据
      noMoreData: false
    }
  },
  components: {
    InfiniteLoading
  },
  methods: {
    // 加载数据
    async loadData($state) {
      // 如果已经加载完所有数据，直接返回
      if (this.noMoreData) {
        $state.complete()
        return
      }

      // 显示加载提示
      this.loading = true

      // 调用后台接口加载数据
      // ...

      // 隐藏加载提示
      this.loading = false

      // 更新列表数据
      if (dataList.length > 0) {
        this.currentPage++
        this.dataList = [...this.dataList, ...dataList]

        // 如果当前页码已经超过了总页码数，设置noMoreData为true
        if (this.currentPage > totalPage) {
          this.noMoreData = true
        }

        // 提示数据已经加载完了
        if (this.noMoreData) {
          $state.complete()
        } else {
          $state.loaded()
        }
      } else {
        $state.complete()
      }
    }
  }
}
</script>

以上是vue移动UI框架滑动加载数据的方法的完整攻略，希望对你有所帮助。