使用Vant上拉加载实现无限列表

一、Vant上拉加载更多

1、vant的上拉加载更多组件可以快速的创建一个带有加载状态的无限列表。只需要使用一个v-for指令渲染列表。使用步骤如下：

// HTML代码

  
   

  

// script代码
export default {
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      finished: false
    };
  },
  onLoad() {
    this.page++;
    setTimeout(() => {
      this.getData();
    }, 1000);
  },
  getData() {
    fetch(`/api/data?page=${this.page}&pageSize=${this.pageSize}`).then(res => {
      return res.json();
    }).then(result => {
      this.list.push(...result.data);
      this.finished = (this.list.length >= result.totalCount);
    });
  }
}

2、在代码中，我们使用van-list组件来渲染列表，接着在data选项里添加page、pageSize和finished三个变量；onLoad函数用来加载更多数据，getData函数从后端请求数据，并且在返回结果后将数据添加到list数组中。当list数组长度等于或者大于后端返回结果的totalCount时，则将finished设为true，表示加载完毕。

二、Vant上拉加载下拉刷新怎么用

1、除了上拉加载更多，vant还为我们提供了下拉刷新组件，使用起来也非常简单直观。只需要使用van-pull-refresh组件，代码如下：

// HTML代码

  
   
    
    
  
   

  

// script代码
export default {
  data() {
    return {
      list: [],
      loading: false
    };
  },
  onRefresh() {
    setTimeout(() => {
      this.getData();
      this.loading = false;
    }, 1000);
  },
  getData() {
    fetch(`/api/data?page=1&pageSize=10`).then(res => {
      return res.json();
    }).then(result => {
      this.list = result.data;
    });
  }
}

2、在代码中，我们使用van-pull-refresh组件包裹van-list组件。当下拉刷新触发时，会调用onRefresh函数，先设置loading为true，然后从后端请求数据，并且在返回结果后将数据设置到list数组中。在代码中，我们使用setTimeout函数模拟后端请求数据的耗时。

三、Vant上拉加载下拉防抖查询

1、在实际使用中，我们可能需要下拉刷新时发起一次数据查询请求，或者在用户输入搜索关键字时发起一次查询请求。为了避免频繁的请求，我们可以使用防抖或者节流函数。

2、比如在下拉刷新时发起数据查询请求时，我们可以使用lodash库提供的防抖函数_.debounce，代码如下：

// HTML代码

  
   
  
   
    
    
  
   

  

// script代码
import { debounce } from 'lodash';

export default {
  data() {
    return {
      list: [],
      query: '',
      loading: false,
      search: debounce(this.onSearch, 500)
    };
  },
  onRefresh() {
    setTimeout(() => {
      this.getData();
      this.loading = false;
    }, 1000);
  },
  onSearch() {
    fetch(`/api/data?q=${this.query}&page=1&pageSize=10`).then(res => {
      return res.json();
    }).then(result => {
      this.list = result.data;
    });
  },
  getData() {
    fetch(`/api/data?page=1&pageSize=10`).then(res => {
      return res.json();
    }).then(result => {
      this.list = result.data;
    });
  }
}

3、在代码中我们使用了lodash库的debounce函数，在data选项里结合onSearch函数创建了search变量。当用户在搜索框输入时会调用search变量，从而防抖调用onSearch函数。在onSearch函数中，我们从后端请求数据，并且在返回结果后将数据设置到list数组中。

四、Uniapp上拉加载更多

1、如果你在uniapp中使用vant，则需要注意的是，由于uniapp是跨平台开发框架，不能直接使用浏览器的window对象获取页面高度或者滚动距离。所以需要使用uni-app提供的api来实现上拉加载更多，代码如下：

// HTML代码

  
   

  

// script代码
export default {
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      finished: false
    };
  },
  onLoad() {
    this.page++;
    uni.request({
      url: `/api/data?page=${this.page}&pageSize=${this.pageSize}`,
      success: (res) => {
        let result = res.data;
        this.list.push(...result.data);
        this.finished = (this.list.length >= result.totalCount);
      }
    });
  }
}

2、在代码中，我们使用uniapp提供的api实现上拉加载更多。在data选项里添加page、pageSize和finished三个变量，在onLoad方法中使用uni.request方法发送请求，从后端获取数据，并且将数据添加到list数组中。当list数组长度等于或者大于后端返回结果的totalCount时，将finished设为true表示加载完毕。

五、VueVant下拉加载

1、如果你使用Vue和Vant来实现下拉加载，那么可以使用better-scroll库提供的下拉刷新和上拉加载更多插件。具体使用方法如下：

// HTML代码

  

// script代码
import BScroll from 'better-scroll';

export default {
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      loading: false,
      finished: false
    };
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.scroll, {
      pullUpLoad: {
        threshold: 50
      }
    });
    this.scroll.on('pullingUp', this.onLoad);
  },
  onLoad() {
    if (this.loading || this.finished) {
      return;
    }
    this.loading = true;
    this.page++;
    fetch(`/api/data?page=${this.page}&pageSize=${this.pageSize}`).then(res => {
      return res.json();
    }).then(result => {
      this.list.push(...result.data);
      this.loading = false;
      this.finished = (this.list.length >= result.totalCount);
      this.scroll.finishPullUp();
    });
  }
}

2、在代码中，我们使用better-scroll库来实现下拉刷新和上拉加载更多的功能。在mounted生命周期函数里创建better-scroll实例，并且绑定pullingUp事件。onLoad方法用来加载更多数据，在方法中判断是否正在加载和是否已经加载完毕，然后从后端获取数据，并且将数据添加到list数组中。当list数组长度等于或者大于后端返回结果的totalCount时，将finished设为true表示加载完毕，同时调用finishPullUp方法来通知better-scroll组件已经加载完毕。