实战技巧：Vue+Vant开发移动端局部列表刷新加载更多案例

2024-01-27 03:31:38

前言

局部列表刷新加载更多是移动端开发中常见的需求，也是开发过程中遇到的难点之一。在Vue+Vant框架下开发移动端应用时，想要实现这一功能，需要掌握一定的技巧。本文将结合实战案例，详细讲解如何实现Vue+Vant局部列表刷新加载更多功能。

实战案例

假设我们有一个移动端应用，首页包含一个列表，其中部分数据需要动态加载。当用户下拉刷新时，需要重新加载列表数据；当用户滚动到列表底部时，需要加载更多数据。

实现步骤

在父组件中定义数据和方法

export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false
    };
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      this.loading = true;
      setTimeout(() => {
        this.list = [
          { id: 1, name: 'item1' },
          { id: 2, name: 'item2' },
          { id: 3, name: 'item3' }
        ];
        this.loading = false;
      }, 1000);
    },
    // 加载更多
    onLoadMore() {
      if (this.finished) {
        return;
      }
      this.loading = true;
      setTimeout(() => {
        this.list = this.list.concat([
          { id: 4, name: 'item4' },
          { id: 5, name: 'item5' },
          { id: 6, name: 'item6' }
        ]);
        this.loading = false;
        if (this.list.length >= 10) {
          this.finished = true;
        }
      }, 1000);
    }
  }
};

在子组件中使用v-infinite-scroll指令

<template>
  <div>
    <van-list v-infinite-scroll="onLoadMore" infinite-distance="50">
      <van-cell v-for="item in list" :key="item.id">
        {{ item.name }}
      </van-cell>
    </van-list>
    <van-loading v-if="loading"></van-loading>
    <van-empty v-else-if="finished"></van-empty>
  </div>
</template>

<script>
import { List, Cell, Loading, Empty } from 'vant';

export default {
  components: {
    [List.name]: List,
    [Cell.name]: Cell,
    [Loading.name]: Loading,
    [Empty.name]: Empty
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false
    };
  },
  methods: {
    // 加载更多
    onLoadMore() {
      this.$emit('load-more');
    }
  }
};
</script>

在父组件中使用v-pull-refresh指令

<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <局部列表组件 />
    </van-pull-refresh>
  </div>
</template>

<script>
import { PullRefresh } from 'vant';
import 局部列表组件 from './局部列表组件.vue';

export default {
  components: {
    [PullRefresh.name]: PullRefresh,
    局部列表组件
  },
  data() {
    return {
      refreshing: false
    };
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      this.refreshing = true;
      this.$nextTick(() => {
        this.$refs['局部列表组件'].onRefresh();
      });
    }
  }
};
</script>