使用Vant如何實現(xiàn)數(shù)據(jù)分頁,下拉加載

更新時間：2022年06月28日 15:24:11 作者：倘若hfl

這篇文章主要介紹了使用Vant實現(xiàn)數(shù)據(jù)分頁及下拉加載方式。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vant-ui的van-list實現(xiàn)數(shù)據(jù)分頁加載

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vant數(shù)據(jù)分頁，下拉加載</title>
  <link rel="stylesheet"  rel="external nofollow"  />
</head>
<style>
</style>
<body>
  <div id='app'>
    <van-list class="lazy" v-model="loading" :finished="finished" finished-text="沒有更多了" @load="onLoad"
      :immediate-check="false">
      <div v-for="(item,index) in list" :key="index">{{item}}</div>
    </van-list>
  </div>
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.11/lib/vant.min.js"></script>
<script>
  var Vue = new Vue({
    el: '#app',
    data: {
      list: [],
      page: 1,
      loading: false,
      finished: false,
      num: 0
    },
    created() {
      this.getList()
    },
    mounted() {
    },
    methods: {
      // 請求公共方法
      ajax(url, params, cb) {
        $.ajax({
          type: 'post',
          url: url,
          data: params,
          dataType: "json",
          success: function (response) {
            cb(response)
          }
        });
      },
      onLoad() {
        this.getList()
      },
      getList() {
        let that = this
        that.ajax('url', { kay: 'value' }, function (res) {
          if (res.errcode != 0) {
            that.$toast(res.msg)
            return false
          }
          if (that.page == 1) {
            that.list = res.data.list
          } else {
            that.list = that.list.concat(res.data.list)
          }
          that.loading = false;
          that.page++
          //最后一次請求返回的數(shù)據(jù)為空或小于10條，不在請求，finished = true
          //根據(jù)業(yè)務需求更改
          if (res.data.list.length == 0 || res.data.list == null || res.data.list.length < 10) {
            that.finished = true
            return
          }
        })
      }
    }
  })
</script>
</html>

主要三個屬性

注意：

v-model 每次數(shù)據(jù)加載完成要置為false
finished 置為false后將不再觸發(fā)下拉加載
immediate-check 置為false后，每次進入頁面將不會觸發(fā)load方法，防止進入頁面多次加載

vant上拉加載更多,下拉刷新

1.html

? ?<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
? ? ? ? ? ? <van-list
? ? ? ? ? ? ? v-model="loading"
? ? ? ? ? ? ? :finished="finished"
? ? ? ? ? ? ? :immediate-check="false"
? ? ? ? ? ? ? finished-text="沒有更多了呦"
? ? ? ? ? ? ? @load="onLoad"
? ? ? ? ? ? >?
? ? ? ? ?
? ? ? ? ? ? </van-list>
? ? ? ? ? </van-pull-refresh>

2.js

?return {? ??
? ? ? isLoading: false,
? ? ? loading: false,? ?
? ??
? ? ? page: 1,
? ? ? limit: 10,
? ? ? finished: false,
? ? ? total: 0, // 總共的數(shù)據(jù)條數(shù)
? ? ? List: [],?
? ? }
?
? ?getHistory() {
? ? ? const historyData = {
? ? ? ? page: this.page,
? ? ? ? limit: this.limit
? ? ? }
? ? ? return new Promise((resolve, reject) => {
? ? ? ? getHistory(historyData)
? ? ? ? ? .then(res => {
? ? ? ? ? ? if (res.code === 0) {
? ? ? ? ? ? ? console.log(res, '歷史記錄')
? ? ? ? ? ? ? this.total = res.data.total
? ? ? ? ? ? ? this.finished = !res.data.hasNext
? ? ? ? ? ? ? if (res.data.list && res.data.list.length > 0) {
? ? ? ? ? ? ? ? const tempList = res.data.list
? ? ? ? ? ? ? ? // console.log(this.page)
? ? ? ? ? ? ? ? if (this.page > 1) {
? ? ? ? ? ? ? ? ? this.list = this.list.concat(tempList)
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? this.list = tempList // 第一次加載
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.page += 1
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? this.list = []
? ? ? ? ? ? ? }
? ? ? ? ? ? ? this.loading = false
? ? ? ? ? ? ? resolve()
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ? ? .catch(error => {
? ? ? ? ? ? reject(error)
? ? ? ? ? })
? ? ? })
? ? },?
?
? onLoad() {
? ? ? this.getHistory()
? ? },
? ? onRefresh() {
? ? ? this.page = 1
? ? ? setTimeout(() => {
? ? ? ? this.getHistory()
? ? ? ? Toast('刷新成功')
? ? ? ? this.isLoading = false
? ? ? }, 1000)
? ? },

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: