使用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代碼

加載中...

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/187050.html