脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vant实现数据分页,下拉加载

使用Vant如何实现数据分页,下拉加载

 更新时间：2022年06月28日 15:24:11   作者：倘若hfl  
这篇文章主要介绍了使用Vant实现数据分页及下拉加载方式。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

Vant-ui的van-list实现数据分页加载

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vant数据分页，下拉加载</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.11/lib/index.css" 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++
          //最后一次请求返回的数据为空或小于10条，不在请求，finished = true
          //根据业务需求更改
          if (res.data.list.length == 0 || res.data.list == null || res.data.list.length < 10) {
            that.finished = true
            return
          }
        })
      }
    }
  })
</script>
</html>

主要三个属性

注意：

  • v-model 每次数据加载完成要置为false
  • finished 置为false后将不再触发下拉加载
  • immediate-check 置为false后，每次进入页面将不会触发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, // 总共的数据条数
      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)
    },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 

您可能感兴趣的文章:

相关文章

  • vue中实现回车键登录功能

    vue中实现回车键登录功能

    这篇文章主要介绍了vue中实现回车键登录功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • vue3通过ref获取子组件defineExpose的数据和方法

    vue3通过ref获取子组件defineExpose的数据和方法

    defineExpose是Vue3中新增的选项,用于向父组件暴露子组件内部的属性和方法,通过defineExpose,子组件可以主动控制哪些属性和方法可以被父组件访问,本文主要介绍了vue3通过ref获取子组件defineExpose的数据和方法,需要的朋友可以参考下
    2023-10-10
  • vue-router后台鉴权流程实现

    vue-router后台鉴权流程实现

    本文主要介绍了vue-router后台鉴权流程实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue mvvm数据响应实现

    vue mvvm数据响应实现

    这篇文章主要介绍了vue mvvm数据响应实现的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
    2020-11-11
  • Vue项目中vue.config.js常用配置项详解

    Vue项目中vue.config.js常用配置项详解

    在 Vue CLI 创建的项目中,vue.config.js 是核心配置文件,用于定制化构建、开发和部署流程,本文详细解析了该文件的常用配置项,并结合代码示例和表格说明,帮助开发者高效管理项目配置,提升开发体验,需要的朋友可以参考下
    2025-04-04
  • Vue项目中如何引入本地第三方JS库

    Vue项目中如何引入本地第三方JS库

    vue中常遇到第三方js,这篇文章主要给大家介绍了关于Vue项目中如何引入本地第三方JS库的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • VSCode前端Vue项目引入Element-ui组件三步简单操作方法

    VSCode前端Vue项目引入Element-ui组件三步简单操作方法

    elementui相当于一个库,封装好的内容,我们引入到vue项目中,就可用库中的内容,这篇文章主要给大家介绍了关于VSCode前端Vue项目引入Element-ui组件的三步简单操作方法,需要的朋友可以参考下
    2024-07-07
  • vue中button标签样式和功能禁用的写法

    vue中button标签样式和功能禁用的写法

    这篇文章主要介绍了vue中button标签样式和功能禁用的写法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue.js的计算属性computed详解

    Vue.js的计算属性computed详解

    文章介绍了Vue.js中的计算属性（computed properties）,解释了它们的基本概念、语法、优势以及应用场景,文章通过有趣的示例展示了计算属性在不同场景下的应用,如计算全名、计算列表的总和和计算对象的属性,感兴趣的朋友一起看看吧
    2025-03-03
  • VuePress 静态网站生成方法步骤

    VuePress 静态网站生成方法步骤

    这篇文章主要介绍了VuePress 静态网站生成方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

最新评论